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