在输入中文触发oninput后,v-model绑定的值会被设成空字符串,这时候再输入数字,v-model绑定的值不会被赋值,一直为空。解决方法可以用blur手动给绑定的值赋值。
<el-input
v-model="form.account"
clearable
placeholder="请输入手机号"
onkeyup="value=value.replace(/[^\d]/g,'')"
@blur="form.account = $event.target.value"
></el-input>
重点就在于 $event.target.value
$event介绍
$event是指当前触发的是什么事件(鼠标事件,键盘事件等)
$event.target则指的是事件触发的目标,即哪一个元素触发了事件,这将直接获取该dom元素
注意:$event是VUE的特殊变量,用于访问原生 DOM 事件, $event 只能作为方法参数被传入。
<input @blur="getData($event)"></input>
<script>
export default {
name:'',
title:'',
data() {
return {
tableShowSenior: false,
tableOptionSenior: {}
}
},
methods: {
getData(e){
alert(e.target.value);
}
}
}
</script>
处理兼容问题:
getData(e){
e = e || window.event;
alert(e.target.value);
}
可以看出$event也可以通过window.event的方式获取。
本文介绍了一种解决在使用Vue.js框架时,中文输入导致v-model绑定值变为空字符串的问题。通过在el-input组件中加入特定指令,确保即使在输入中文后,也能正常赋值数字,并保持数据绑定的一致性。
3848

被折叠的 条评论
为什么被折叠?



