【Vue】浅析Vue.js中v-bind与v-model的使用和区别

vue 中有两种数据绑定的方式：

1. 单向数据绑定（v-bind)

   数据只能从data流向页面（通俗来讲就是 data 里面的数据改变，页面上展示内容也改变）。

   如下方例子，当 name 绑定的值改变时，input 框里的值也该改变，但是当在输入框里面输入内容后，我们在控制台打印 name，可以发现 name 的值并不发生改变

   单项数据绑定：<input type="text" v-bind:value="name">
   

2. 双向数据绑定（v-model)

   数据不仅能从data流向页面，还可以从页面流向 data

   如下方例子，当 name 绑定的值发生改变时，input 框内容发生改变。当我们像输入框输入内容后，我们在控制台打印 name，可以发现 name 的值也发生了改变！

双向数据绑定：<input type="text" v-model:value="name">

注意事项

1. 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上。并且类似这种并不能输入的元素，也没有必要双向绑定。单向绑定就够了（data里面的数据改变，展示内容跟着改变），双向绑定根本就没有必要。

   输入类元素常用的有：input、单选框、多选框、select框、多行输入

<h2 v-model:x="name">内容</h2>

2. v-model:value 可以简写成 v-model ，因为 v-model 默认收集的就是 value 值

简写（语法糖）

单项数据绑定：<input type="text" v-bind:value="name">
双向数据绑定：<input type="text" v-model:value="name">

上述代码可以简写为：

单项数据绑定：<input type="text" :value="name">
双向数据绑定：<input type="text" v-model="name">