双向绑定
双向绑定原理:
就是在单向绑定的基础上,能自动为元素添加
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属性
的新状态布尔值,自动更新
会程序中的变量保存
。