vue中如何去掉空格
一、问题
vue中当用户提交表单时,有的数据需要去掉前后空格然后再向后端发送。
二、解决方法
首先可以使用v-model.trim
这个v-model
修饰符去解决它,但是当用户输入\u200B
时,这个方法就不奏效了,这时我们可以去一下v-model.trim
这个修饰符的源码
function genDefaultModel (
el: ASTElement,
value: string,
modifiers: ?ASTModifiers
): ?boolean {
const type = el.attrsMap.type
const { lazy, number, trim } = modifiers || {}
const needCompositionGuard = !lazy && type !== 'range'
const event = lazy
? 'change'
: type === 'range'
? RANGE_TOKEN
: 'input'
let valueExpression = '$event.target.value'
// 去掉空格
if (trim) {
valueExpression = `$event.target.value.trim()`
}
if (number) {
valueExpression = `_n(${valueExpression})`
}
let code = genAssignmentCode(value, valueExpression)
if (needCompositionGuard) {
code = `if($event.target.composing)return;${code}`
}
addProp(el, 'value', `(${value})`)
addHandler(el, event, code, null, true)
if (trim || number || type === 'number') {
addHandler(el, 'blur', '$forceUpdate()')
}
}
上面的源码处理方式我们也可以理解为下面这种方式:
<input :value="name" @input="if($event.target.composing)return;name=$event.target.value.trim()" type="text"/>
所以我们可以把上面的方法强化或者改进一下:
<template>
<div @input="removeSpaces">
<el-input v-model.trim="value"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
value : ''
}
},
methods: {
removeSpaces(event) {
if(event.target.composing){
return
}
this.value = event.target.value.trim()
this.value = this.value.replace("\\u200B","")
}
}
}
</script>
同理,使用这种方法我们可以定制一些其他功能的输入框组件
参考文章:参考文章
原文地址:https://segmentfault.com/a/1190000016953061
vue中如何去掉空格的更多相关文章
- String 中去掉空格
JAVA中去掉空格 1. String.trim() trim()是去掉首尾空格 2.str.replace(" ", ""); 去掉所有空格,包括首尾.中间 ...
- JAVA中去掉空格经典整理
JAVA中去掉空格经典整理 JAVA中去掉空格 1. String.trim() --------------trim()是去掉首尾空格 2.str.replac ...
- iOS字符串NSString中去掉空格(或替换为某个字符串)
http://blog.sina.com.cn/s/blog_6f29e81f0101qwbk.html [问题描述] 今天请求服务器返回的字段中含有空格,这空格是服务器开发人员不小心往数 ...
- 如何去掉C#字符串中的所有空格(转载)
如何去掉C#字符串中的所有空格 来源:https://www.cnblogs.com/donchen/p/8966059.html 字符串行数Trim()可以去掉字符串前后的空格,如: C# Cod ...
- 如何去掉C#字符串中的所有空格
字符串行数Trim()可以去掉字符串前后的空格,如: C# Code string myString = " this is a test "; Console.WriteLi ...
- c# 字符串去掉两端空格,并且将字符串中多个空格替换成一个空格
字符串去掉两端空格,并且将字符串中多个空格替换成一个空格: 主要还是考察使用字符串的方法: trim(); 去掉字符串两端空格 split(); 切割 string.join(); 连接 class ...
- vue中去掉url地址栏中的#符号
要去掉vue中访问地址中的#符号可以在路由器中设置路由模式为history: export default new Router({ mode:'history', routes: [ { path: ...
- 去掉vue 中的代码规范检测(Eslint验证)
去掉vue 中的代码规范检测(Eslint验证): 1.在搭建vue脚手架时提示是否启用eslint检测的. Use ESLint to lint your code? 写 no; 2.如果项目已经生 ...
- js去掉字符串中的所有空格
1.使用js去掉字符串中的所有空格 1.1.定义一个去空格函数方法 function Trim(str,is_global){ var result; result = str.replace(/(^ ...
随机推荐
- 使用word2vec对中文维基百科数据进行处理
一.下载中文维基百科数据https://dumps.wikimedia.org/zhwiki/并使用gensim中的wikicorpus解析提取xml中的内容 二.利用opencc繁体转简体 三.利用 ...
- Tomcat 激活spring profile
springboot打包war部署到外部tomcat的时候指定profile启动 windows 在%tomcat%/bin下创建setenv.bat文件 linux 在%tomcat%/bin下创建 ...
- Springboot(九).多文件上传下载文件(并将url存入数据库表中)
一. 文件上传 这里我们使用request.getSession().getServletContext().getRealPath("/static")的方式来设置文件的存储 ...
- 解决idea无法显示中文候选框问题
第一:先找到idea安装目录,找到文件jre64,把它命名为“jre642”,也可以随意命名 第二步:找到Javaan安装目录下的jre ,把它复制到idea安装目录下,命名为“jre64”. 第三 ...
- 【每日一包0012】to-camel-case,to-no-case,to-space-case
github地址:https://github.com/ABCDdouyaer/a_pack_per_day_NO.1 to-camel-case 将被其他符号分割的字符串转换为驼峰形式的字符串 用法 ...
- maven web项目的web.xml报错The markup in the document following the root element must be well-formed.
maven项目里面的web.xml开头约束是这样的 <?xml version="1.0" encoding="UTF-8"?> <web-a ...
- gdb调试时忽略SIGPIPE 等信号
GDB调试网络程序时,会遇到SIGPIPE信息,默认GDB会把程序停下来,即使程序使用signal(SIGPIPE, SIG_IGN);来忽略信号.用handle命令设置一下缺省的signal的处理行 ...
- 【转】Java操作CSV文件导入导出
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- nodejs 中的 cookie 及 session
cookie-parser 插件:cookie解析,加密的操作 cookie-session 插件:session 的解析操作 http 是无状态的 cookie:在浏览器保存一些数据,每次向服务器发 ...
- mysql索引失效问题
1.两表关联使用的条件字段中字段的长度是否是一致的 2.两表关联使用的条件字段中字段的编码是否是一致的