vue表单控件绑定

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

text

Message is: {{ message }}

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

checkbox

    
    Jack
    
    John
    
    Mike
    

    Checked names: {{ checkedNames }}

  new Vue({
    el: '#example',
    data: {
      checkedNames: []
    }
})

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

radio

  
  One
  

  
  Two
  

  Picked: {{ picked }}

new Vue({
  el: '#example',
  data: {
    picked: ''
  }
})

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

select

  
    请选择
    A
    B
    C
  
  Selected: {{ selected }}

new Vue({
  el: 'example',
  data: {
    selected: ''
  }
})

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

多选时:

  
    A
    B
    C
  
  

  Selected: {{ selected }}

new Vue({
  el: '#example',
  data: {
    selected: []
  }
})

值绑定

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

new Vue({
  el: '',
  data: {
    a: 1,
    picked:''
  }
})

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

修饰指令

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