一、问题
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 value = \'$event.target.value\'
// 去掉空格
if (trim) {
value = `$event.target.value.trim()`
}
if (number) {
value = `_n(${value })`
}
let code = genAssignmentCode(value, value )
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>
< >
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\",\"\")
}
}
}
</ >
同理,使用这种方法我们可以定制一些其他功能的输入框组件
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
继续阅读与本文标签相同的文章
上一篇 :
网络安全和区块链:为了我们的安全而不断发展的技术
-
万余平方米演示自动驾驶,世界智能网联汽车大会来了!
2026-05-19栏目: 教程
-
独家解读 etcd 3.4版本 |云原生生态周报 Vol. 18
2026-05-19栏目: 教程
-
5大高清免费无版权图片网站,设计、自媒体都不是问题,值得收藏
2026-05-19栏目: 教程
-
物联网平台实用技巧:设备端检测自己是否在线
2026-05-19栏目: 教程
-
阿里云代金券+9折优惠码实践,原价2381元的云服务器实际购买价1943元
2026-05-19栏目: 教程
