vue表单控件绑定

    v-model 指令可以在表单控件上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

text

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

    当用户操作文本框时，name会自动更新为用户输入的值，p的内容也会随之改变。

checkbox

<div id='example'>
    <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>
  new Vue({
    el: '#example',
    data: {
      checkedNames: []
    }
})

    当用户勾选checkbox时，checkedNames的值也会变，span中显示的值随之也会发生变化。

radio

<div id="example">
  <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>
new Vue({
  el: '#example',
  data: {
    picked: ''
  }
})

    当用户勾选radio时，v-model中的变量会赋值为对应的value值，picked发生变化，span中的值也会发生变化。

select

<div id="example">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option value="a" >A</option>
    <option value="" >B</option>
    <option >C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: 'example',
  data: {
    selected: ''
  }
})

    当选中的option有value值时，selected为value的值，否则对应option的text值。

多选时:

<div id="example">
  <select v-model="selected" multiple>
    <option value="a" >A</option>
    <option value="b" >B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '#example',
  data: {
    selected: []
  }
})

值绑定

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

<input type="radio" v-model="picked"  :value="a">
new Vue({
  el: '',
  data: {
    a: 1,
    picked:''
  }
})

用户勾选时，vm.picked === vm.a

修饰指令

    修饰指令有lazy,number,trim,debounce(vue 2.0废除),在之前的vue内置指令中v-model部分介绍过了，您可以点击查看。