vue：input输入框多种用法的取值

最新推荐文章于 2025-02-22 12:00:00 发布

原创最新推荐文章于 2025-02-22 12:00:00 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文详细讲解了v-model双向绑定在不同类型的表单元素中的使用技巧，包括text、radio、checkbox的值获取，以及懒加载、数值验证和表单提交控制。强调了2021年更新的高级用法和实际工作中的重要性。

学习内容：

1、type值为text：取值就是value值，data定义为字符串
2、type值为radio：取值就是value，必须配置value值，data定义为字符串
3、type值为checkbox(多个选项)：如果配置了value，取值为value，data定义为数组；如果没有定义value值，那么取值就是checked(true、false)
4、type值为checkbox(单个选项)：取值为布尔类型，data定义为字符串
5、v-model双向绑定值，可以添加修饰符，例如：v-model.lazy：用于多行文本，v-model.number：验证输入类型是否为数字，@submit.prevent：阻止默认行为，提交表单，不是使页面刷新和跳转，v-model.trim：清除输入框前后空格