Vue v-model修饰符，@change事件

最新推荐文章于 2025-02-27 00:30:35 发布

姜不吃葱

最新推荐文章于 2025-02-27 00:30:35 发布

阅读量9k

点赞数 5

本文链接：https://blog.youkuaiyun.com/soul7y/article/details/107547493

版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文探讨了在Vue.js中优化输入框的方法，包括使用v-model.number和v-model.trim修饰符来改善数值输入和文本处理，以及通过@change和@input事件实现更精细的输入控制。

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

输入框经常受到需求或者客观逻辑的制约，对于输入内容需要就进行优化。

v-model.number
使用修饰符.number可以将输入的数据转换为Number类型，否则虽然你输入的是数字，但它的类型其实还是string。
v-model.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。
@change
@change当输入框失焦的时候触发而且在elementUI中使用change时是这样的@visible-change。可以使用于：<input>, <select>, 和 <textarea>
@input
@input是输入框发生变化时触发，也就是说输入框一动就出触发了

<input
	v-model.number="allStrategy[index].args.beginTimeAheadOfDeparture"
	max="43200"
	min="0"
	type="number"
	@change="allStrategy[index].args.beginTimeAheadOfDeparture=Math.floor(allStrategy[index].args.beginTimeAheadOfDeparture)">

直接会输入值取整。