Vue的v-model详解
文章目录
- 一，v-model是什么？
- 二，作用
- 三，原理
- 四，类型
- 1. v-model：radio
- 2. v-model：checkbox
- 单个复选框
- 多个复选框
- 3. v-model：select
- 五，修饰符
- 1. lazy
- 2.number
- 3.trim
一，v-model是什么？
{{msg}}
结果：
二，作用
Vue中使用v-model指令来实现表单元素和数据的双向绑定。监听用户的输入，然后更新数据。
- 因为input中的v-model绑定了msg,所以会实时将输入的内容传递给msg , msg发生改变。
- 当msg发生改变时,因为上面使用了插值语法将msg的值插入到DOM中,所以DOM会发生响应的改变。所以通过v-model实现了双向的绑定。
三，原理
v-model本质上是个语法糖，其实现原理包含两个步骤
- 通过v-bind绑定一个value属性
- 通过v-on指令给当前元素绑定input事件
v-on:input="" 用于动态监听用户输入的信息，在界面上产生一个事件后，浏览器会生成一个event对象，这个event对象就包含了输入的信息
四，类型
除了上面的文本类型，v-model还能结合其他类型使用
1. v-model：radio
你的判断是：{{judge}}
结果：
2. v-model：checkbox
单个复选框
{{isOk}}
结果：
多个复选框
香蕉苹果梨子爱吃的水果是：{{fruits}}
结果：
3. v-model：select
喜欢的视频类型是：{{type}}
结果：
五，修饰符
1. lazy
v-model在默认情况下同步了输入框的数据，就是说输入框数据一有改变，对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点之后才更新
2.number
默认情况下，输入框得到的数据最后都会变成字符串形式。number修饰符可以将输入框得到的内容转为数字类型。
3.trim
trim修饰符可以去掉从输入框获取的内容的左右两边的空格
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！