Vue.js 中的 v-model 是如何实现的？

v-model 是 Vue.js 中的一个指令,它允许我们在表单元素上创建双向绑定。
v-model 实现双向绑定的步骤:

1. 它会根据控件类型自动选取正确的方法来更新元素。
2. 它会把数据同步到视图中,视图又会把数据同步回数据源。
3. 它会自动检测表单元素的值改变,并更新绑定的元素值。
4. 它结合了属性和事件来实现双向数据绑定。

示例:

html
<input v-model="message">

等价于:

html
<input
  :value="message" 
  @input="message = $event.target.value" 
>

当您在 中输入内容时:

1. 调用 @input 事件,并更新 message 的值。
2. message 作为 :value,把最新值同步回 。
3. 实现了双向数据绑定。

更多示例:

html
<input type="radio" v-model="pick" :value="a">

<textarea v-model="msg"></textarea>  

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

v-model 会根据不同的表单元素使用不同的属性和事件来实现双向绑定:

1. 用于 text 和 textarea 的 contenteditable 元素使用 value 属性和 input 事件。
2. 用于复选框及单选按钮的 input[type=”checkbox”] 和 input[type=”radio”] 使用 checked 属性和 change 事件。
3. 用于 select 的 value 属性和 change 事件。