一、问题

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()')

}

}

上面的源码处理方式我们也可以理解为下面这种方式：

复制代码 代码如下:

所以我们可以把上面的方法强化或者改进一下：

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","")

}

}

}

同理，使用这种方法我们可以定制一些其他功能的输入框组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

本文标题: vue中如何去掉空格的方法实现

本文地址: http://www.cppcns.com/wangluo/javascript/244088.html