vue 中 input v-model中的坑及限制number的长度

最新推荐文章于 2025-06-22 18:25:26 发布

cm_xuan77

最新推荐文章于 2025-06-22 18:25:26 发布

阅读量2.9w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/cmchenmei/article/details/82423864

vue 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了Vue中v-model.number的使用误区，特别是在处理长数字时可能出现的数据精度问题，并提供了解决方案，如限制输入长度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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