微客导航 » 文章资讯 » vue中如何去掉空格的方法实现

vue中如何去掉空格的方法实现

2023-09-06 00:44:05 172

一、问题

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

二、解决方法

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

functiongenDefaultModel(
el:ASTElement,
value:string,
modifiers:?ASTModifiers
):?boolean{
consttype=el.attrsMap.type
const{lazy,number,trim}=modifiers||{}
constneedCompositionGuard=!lazy&&type!=='range'
constevent=lazy
?'change'
:type==='range'
?RANGE_TOKEN
:'input'

letvalueExpression='$event.target.value'
//去掉空格
if(trim){
valueExpression=`$event.target.value.trim()`
}
if(number){
valueExpression=`_n(${valueExpression})`
}

letcode=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()')
}
}

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

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

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

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

返回顶部
3162201930
czq8825@qq.com

vue中如何去掉空格的方法实现

热门推荐

随机推荐