Vue第六讲

表单输入绑定

---

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",
   };
  },