表单输入绑定

v-model

关键点默认绑定的是表单控件的value
输入框：实现双向绑定，不同的控件类型，会自动选取正确的方式。

<input type="text" v-model="message">
等价于
<input type="text" :value="message" @input="message = $event.target.value">

下拉菜单：data绑定的是value属性，但是监听的是change事件。

<select class="ice-cream" name="ice-cream" :value="message" @change="message = $event.target.value">
  <option value="">Select One …</option>
  <option value="chocolate">Chocolate</option>
  <option value="sardine">Sardine</option>
  <option value="vanilla">Vanilla</option>
</select>

单选按钮：data绑定的是checked属性，但是监听的是change事件。
关键点通过sex的值控制单选按钮checked。

<div>
  <input type="radio" name="sex" value='male' id="male_btn" :checked=" 'male' == sex " @change="sexChange">
  <label for="male_btn">男</label><br />
  <input type="radio" name="sex" value='female' id="female_btn" :checked=" 'male' == sex " @change="sexChange">
  <label for="female_btn">女</label><br />
  <input type="submit" value="提交">
</div>

//data: { sex: '' }
//methods: {
//  sexChange(e){
//  this.sex = e.target.getAttribute('value');
//  console.log(this.sex);
//  }
//},

单选框：data绑定的是checked属性，但是监听的是change事件。

<input type="checkbox" v-model="message">
等价于
<input type="checkbox" name="sex" value='male' :checked="isChecked" @change="isChecked = !isChecked">

//data:{isChecked: false}

复选框：data绑定的是checked属性，使用数组接受value值，通过数组里的元素来控制checked属性。

值绑定

主要是对于复选框、单选框、下拉菜单来说，v-model绑定的是checked属性，因此可以另外使用v-bind动态绑定value属性。