v-model表单输入绑定，数据双向绑定

基础用法
可以使用v-model指令在表单,及元素上创建双向数据绑定，他会根据控制类型自动选取正确的方法来更新元素，v-model负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注：v-model会忽略所有表单元素的value,checked,selected特性的初始值，而总是将vue实例的数据作为数据来源，你应该通过js在组件的data选项中声明初始值。
对于需要使用输入法的语言（如中文，日文），你会发现v-model不会在输入法组合文字过程中得到更新，如果你想处理这个过程，请使用input事件。
代码如下：

<template>
  <div>
    <!-- 通过v-model绑定一个变量在input上，当input中的值发生改变时，span中的值也会发生变量-->
    <input type="text" v-model="mes">
    <span>Input输入的内容是：{{mes}}</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mes: ""
    };
  }
};
</script>

单个复选框

单个复选框，绑定到布尔值：
代码如下：

<template>
  <div>
    <!-- 新建一个复选框，使用v-model进行绑定 -->
    <input type="checkbox" v-model="checked">
    <!-- 当复选框变化时，label中的数据也会跟着变化 -->
    <label>{{checked}}</label>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false //默认为不选中
    };
  }
};
</script>

多个复选框checkbox

如果是多个复选框，可以绑定到同一个数组中：

<template>
  <div class="main">
    <ul>
      <li>
        <label>lisa</label>
        <!-- 如果当前input被选中时，它是true，它的值value是“lisa”，此时会把它的值value添加到checkedNames中 -->
        <input type="checkbox" value="lisa" v-model="checkedNames">
      </li>
      <li>
        <label>jack</label>
        <input type="checkbox" value="jack" v-model="checkedNames">
      </li>
      <li>
        <label>coco</label>
        <input type="checkbox" value="coco" v-model="checkedNames">
      </li>
      <li>
        <label>ann</label>
        <input type="checkbox" value="ann" v-model="checkedNames">
      </li>
      <li>
        <label>lucy</label>
        <input type="checkbox" value="lucy" v-model="checkedNames">
      </li>
    </ul>

    <p>选择的是：{{checkedNames}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checkedNames: []
    };
  }
};
</script>

单选按钮：

<template>
  <div class="main">
    <ul>
      <li>
        <label>One</label>
        <input type="radio" id="one" value="One" v-model="picked">
      </li>
      <li>
        <label>Two</label>
        <input type="radio" id="two" value="Two" v-model="picked">
      </li>
      <li>
        <label>Three</label>
        <input type="radio" id="three" value="Three" v-model="picked">
      </li>
    </ul>
    <p>选择的是:{{picked}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      picked: ""
    };
  }
};
</script>

下拉菜单选择框

<template>
  <div class="main">
    <!-- 为下拉菜单设置v-model，选择某一项的时候，就把某一项的值传给selected -->
    <select v-model="selected">
      <!-- disable用来禁用某一个option -->
      <option disabled value>--请选择--</option>
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
      <option>深圳</option>
    </select>
    <p>选择的是:{{selected}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: ""
    };
  }
};
</script>

如果v-model表达式的初始值未能匹配任何选项，元素将被渲染为“未选中”状态，在IOS中，这会使用户无法选中第一个选项，因为这样的情况下，IOS不会触发change事件，因为更推荐像上面这样提供一个值为空的禁用选项。

多选下拉菜单

下拉菜单多选，多选时，绑定到一个数组：
代码如下：

<template>
  <div class="main">
    <select v-model="selected" multiple style="width:150px">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>选择的是:{{selected}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: []
    };
  }
};
</script>

使用v-for渲染动态选项

代码如下：

<template>
  <div class="main">
    <select v-model="selected">
      <option v-for="(item,index) in items" :key="index" :value="item.title">{{item.text}}</option>
    </select>
    <p>当前选择：{{selected}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected: "A", //默认选择第一个value值
      //items是一个数组，数组中是3个对象
      items: [
        { text: "apple", title: "A" },
        { text: "pear", title: "B" },
        { text: "orange", title: "C" }
      ]
    };
  }
};
</script>

值绑定

对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串（对于复选框也可以是布尔值）
代码如下：

<template>
  <div class="main">
    <!-- 当选中单选按钮后，picked的值为a -->
    <input type="radio" v-model="picked" value="a">
    <p>选择值是{{picked}}</p>
    <!-- 当选择复选框后，toggle的值为true或false -->
    <input type="checkbox" v-model="toggle">
    <p>选择值是：{{toggle}}</p>
    <!-- 当选择下拉菜单后，selected的值为option的value的值 -->
    <select v-model="selected">
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
    </select>
    <p>选择值是：{{selected}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      picked: "",
      toggle: "",
      selected: ""
    };
  }
};
</script>

但是有时我们可能想把值绑定到vue实例的一个动态属性上，这时可以用v-bind实现，并且这个属性的值可以不是字符串。

例如：复选框

<template>
  <div class="main">
    <input type="checkbox" v-model="sel" true-value="选中" false-value="未选中">
    <p>选择值是：{{sel}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sel: "未选中"
    };
  }
};
</script>

当复选框选中时，会把true-value的值传给v-model，当未被选中时，会把false-value的值传给v-model
注：这里的true-value和false-value特性并不会影响输入控件的value特性，因为浏览器在提交表单时并不会包含未被选中的复选框，如果要确保表单中这两个值中的一个能够被提交，比如(yes,no)，请换用单选按钮

例如：单选按钮
代码如下：

<template>
  <div class="main">
    <input type="radio" v-model="pick" v-bind:value="aa">
    <p>选择值是：{{pick}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pick: "",
      aa: "选中了"
    };
  }
};
</script>

当选中了单选按钮后，v-model的pick值会获取当前按钮的value的值。

例如：选择框的选项

<template>
  <div class="main">
    <select v-model="sel">
      <option disabled value>--请选择--</option>
      <option v-bind:value="{number:123}">123</option>
    </select>
    <p>选择值是：{{sel.number}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sel: ""
    };
  }
};
</script>

修饰符

.lazy

在默认情况下，v-model在每次input事件触发后输入框的值与数据进行同步（除了上述输入法组合文字时）。你可以添加lazy修饰符，从而转变为使用change事件进行同步：
代码如下：

<template>
  <div class="main">
    <input v-model.lazy="msg">
    <p>选择值是：{{msg}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: ""
    };
  }
};
</script>

注释：v-model默认是同步数据，使用.lazy会转变为在change事件中同步，也就是说加上.lazy后，只有当失去焦点或者按下回车键时才更新。

.number

.number修饰符可以将输入的值转化为Number类型，否则虽然你输入的是数字，但它的类型其实是String，在数字输入框中比较有用。

<template>
  <div class="main">
    <input v-model.number="n" type="number">
    <p>我的数据类型是：{{typeof(n)}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      n: ""
    };
  }
};
</script>

.trim

.trim修饰符会自动过滤掉输入的首尾空格

<template>
  <div class="main">
    <input type="text" v-model.trim="val">
    <p>val的长度是：{{val.length}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      val: ""
    };
  }
};
</script>