v-bind和v-model的区别和联系
1.v-bind和v-model这两个指令都可以完成数据绑定。
2.v-bind是单向数据绑定。
data -> 视图
3.v-model是双向数据绑定。(视图的值变化会引起 data 的变化)
data <--> 视图
4.v-bind可以使用在任何html标签当中。v-model只能使用在表单类元素上
例如:input标签,select标签,textarea标签。
为什么v-model的使用会有这个限制呢?
因为表单类的元素才能给用户提供交互输入的界面。
v-model指令通常也是用在value属性上面的。
5.v-bind和v-model都有简写方式:
v-bind简写方式:(去掉指令名)
v-bind:参数"表达式" 简写为 :参数 = "表达式"
v-model简写方式:(去掉参数)
v-model:value"表达式" 简写为 v-model = "表达式"
接下来做对比
首先我使用两个文本框分别使用这两个指令插入值
进入浏览器后点击【F12】,找到【Vue】组件,点击进入,发现如下
随后在里面修改(在文本框中给这两个值的后面加 “1122”)
结果只有【v-model】指令才能成功(因为该指令是双向数据绑定)
接着试一试简写:
因为我使用的是同一个 data 配置项的值,所以在修改一个 v-model 指令值的时候,另一个指令值也会发生相同的改变(而在这里这也验证了简写语法是成功的)
该文章为笔记,教程为动力节点的老杜Vue视频教程,Vue2 Vue3实战精讲
视频链接:https://www.bilibili.com/video/BV17h41137i4?p=1&vd_source=2136c732ce8d5a3f412e2f7064285cb7