3. vue双向绑定指令

双向绑定

双向绑定原理：

就是在单向绑定的基础上，能自动为元素添加onchange或oninput事件处理函数。并能在事件处理函数中，自动将新值更新到data的变量中。
v ⇒ m / m ⇒ v
① 访问器属性 ② 虚拟DOM树 ③ 自动添加事件绑定

v-model 双向绑定

<元素 v-model="变量">

1. 表单元素

<表单元素 v-model="变量">
<!--等价于单价绑定+input-->
<表单元素 :value="变量" @input="input">  
<!--input中： this.变量=e.target.value -->

2. 表单元素：单选按钮

两个或多个input为一组。value的值时定死的。（备选）

<input type="radio" name="sex" value="1" v-model="sex">
<input type="radio" name="sex" value="0" v-model="sex">

v-model 中的 sex 与 value做比较。相等时，则当前radio自动选中。
只会将选中的radio的value更新到程序中的变量保存

3. 下拉列表<select>

<select v-model="变量">
<option value="备选值1"></option>
<option value="备选值2"></option>
<select>

v-model的变量会和option的value作比较。当用户切换select之后，v-model会将选中的一个option的value值自动更新到程序中的变量保存

4. 复选框 checkbox

<input type="checkbox" v-model="变量">

v-model 将变量值取出给checkbox的checked属性。如果为true,就被选中。
用户切换之后，v-model将当前checked属性的新状态布尔值，自动更新会程序中的变量保存。