Vue 框架之 v-model 指令详解

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