vue 中 input v-model中的坑 及 限制number的长度
v-model.number 存在的坑<input type="number" v-model='order'> //在输入值 在输出的时候会被转换为string类型想要输入的内容依然是数字<input type="number" v-model.number=
·
v-model.number 存在的坑
<input type="number" v-model='order'> //在输入值 在输出的时候会被转换为string类型
想要输入的内容依然是数字
<input type="number" v-model.number='order'>
输出的时候是Number类型,因为在内部帮你把数据做了转化Number(order)
输出,
但此时会埋下一个大坑:
Number('152845125481254538') // 152845125481254530
Number('152845125481254532') // 152845125481254530
Number('152845125481254534') //152845125481254530
Number('152845125481254523') // 152845125481254530
看到这里就会发现 Number() 转化后数据会发生改变,所以在使用v-model.number
数据会发生不可控制的改变
限制number的输入长度
<input type="number" v-model='order' ref='order' @input='limitOrder'>
limitOrder () {
// 要做长度判断
if (this.$refs.order.value.length > 11) {
this.$refs.order.value = this.$refs.order.value.slice(0, 18)
this.order = this.$refs.order.value
}
},
存在的坑: 从数据中间删除某个数字,焦点会自动跳到最后一个,所以要做长度的判读,如果长度未达到你所要限制的长度的话,就不需要截取。
更多推荐
已为社区贡献3条内容
所有评论(0)