用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

用单个复选框的时候，v-model指令绑定布尔值。

<div id="p">
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{isClick}}</label>
</div>
<script>
    var c=new Vue({
        el:"#p",
        data:{
            checked:false,
        }
        computed:{
            isClick:function(){
               return this. checked?"选我吧"："别选我"
            }
        }
    })
</script>

上例中，通过控制checked的布尔值来改变label的值：默认情况下，checked为false，label值为“别选我；”当选中复选框时，checked为true，label值为“选我吧”；取消选中复选框时，checked为false，label值为“别选我”。

多个复选框时，v-model绑定到同一个数组。

<div id='example-3'>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
</div>
<script>
    var c=new Vue({
        el: '#example-3',
        data: {
            checkedNames: []
         }
    })
</script>

上例中，默认情况下checkedNames数组的值为空字符串；当选中某个复选框时，将其对应的value值（若不设置value值，那么添加到checkedNames数组中的将是null）添加到checkedNames数组中，同时由{{ checkedNames }}以数组的形式输出checkedNames数组的值。

复选.png

单选框

<div id="example-4">
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span>
</div>
<script>
    var c=new Vue({
        el: '#example-4',
        data: {
            picked: ''
        }
      })
</script>

单选框的原理与复选框类似：默认情况下picked的值是一个空字符串；当选中某个单选框时，将其对应的value值赋给picked变量，并由{{ picked }}显示其值。

单选的选择框

<div id="example-5">
    <select v-model="selected">
      <!--如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像下面这样提供一个值为空的禁用选项。-->
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script>
    var c=new Vue({
        el: '#example-5',
        data: {
            selected: ''
        }
    })
</script>

多选的选择框：如果想选多项的话，要摁住CTRL键再选择。

<div id="example-6">
    <select v-model="selected" multiple style="width: 50px;">
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <br>
    <span>Selected: {{ selected }}</span>
</div>
<script>
    var c=new Vue({
        el: '#example-6',
        data: {
            selected: []
        }
    })
</script>