表单输入绑定
Vue 中提供了一个 v-model 的指令用于表单元素。
双向数据绑定
通过 v-model 绑定的元素身上,都具有“双向数据绑定”的功能。
双向数据绑定,指的是:页面由 data 中的数据渲染而来,当 data 中的数据发生改变时,页面会自动更新;当操作页面时, data 中的数据也会随之改变。
v-model 的使用
1.输入框
在输入框中绑定 v-model 属性,就可以通过 v-model 的属性值,实时获取到用户输入的内容。
<input type="text" v-model="name">
data() {
return {
name:'zhangsan'
}
},
2.复选框
(1)单个复选框
在单个复选框上绑定 v-model 属性,可以通过 v-model 属性值的 true 或 false, 来控制复选框的选中或未选中。
<input type="checkbox" v-model="isChecked">
data() {
return {
isChecked:true
}
},
(2)多个复选框
在多个复选框上绑定同一个 v-model 属性,通过判断复选框自己的 value 值是否在 v-model 的数组里面,来控制复选框的选中与未选中。同时,操作复选框的选中与未选中,也会同步更新复选框的 value 值在数组中添加或删除。
<div>
<input type="checkbox" value="eat" v-model="checkeds">吃饭
<input type="checkbox" value="sleep" v-model="checkeds">睡觉
<input type="checkbox" value="hit" v-model="checkeds">打豆豆
</div>
data() {
return {
checkeds:['sleep','eat']
}
},
3.单选框
在单选框上绑定 v-model 属性,通过判断单选框自己的 value 值是否和 v-model 的值相等,来控制单选框的选中与未选中。
<div>
<input type="radio" value="男" v-model="gender">男
<input type="radio" value="女" v-model="gender">女
</div>
data() {
return {
gender:'女',
}
},
4.下拉列表
在 select 上身上绑定 v-model 属性,通过判断 option 的 value 值和 v-model 的值是否相等,来决定被选中的 option。
<select name id v-model="from" class="form-control">
<option value="en">英文</option>
<option value="zh">中文</option>
<option value="de">德语</option>
<option value="ja">日语</option>
<option value="ko">韩语</option>
</select>
data() {
return {
from: "zh",
};
},