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
    }
 },

存在的坑: 从数据中间删除某个数字,焦点会自动跳到最后一个,所以要做长度的判读,如果长度未达到你所要限制的长度的话,就不需要截取。

Logo

前往低代码交流专区

更多推荐