vue 中 input 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
    }
 },

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