vue中如何去掉空格的方法实现
作者：Pjee
这篇文章主要介绍了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>
同理，使用这种方法我们可以定制一些其他功能的输入框组件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。