vue中如何去掉空格

一、问题

vue中当用户提交表单时,有的数据需要去掉前后空格然后再向后端发送。

二、解决方法

首先可以使用v-model.trim这个v-model修饰符去解决它,但是当用户输入\u200B时,这个方法就不奏效了,这时我们可以去一下v-model.trim这个修饰符的源码

function genDefaultModel (el: ASTElement,value: string,modifiers: ?ASTModifiers
): ?boolean {const type = el.attrsMap.typeconst { 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()')}
}

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

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


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

参考文章:参考文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright www.122dh.com Rights Reserved.