前面的话

　　本文将详细介绍Vue表单控件绑定

 

基础用法

　　可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据

　　[注意]v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它会选择Vue实例数据来作为具体的值。应该通过JS组件的data选项中声明初始值

【type:text】

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

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:''
  }
})
</script>

<iframe style="width: 100%; height: 100px;" src="http://owbhsauev.bkt.clouddn.com/vue/form/f1.html" frameborder="0" width="320" height="240">

　　实际上v-model是:value和@input事件的语法糖

<div id="example">
  <input :value="message" placeholder="edit me" @input="message=$event.target.value">
  <p>Message is: {{ message }}</p>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:''
  },
})
</script>

<iframe style="width: 100%; height: 100px;" src="http://owbhsauev.bkt.clouddn.com/vue/form/f2.html" frameborder="0" width="320" height="240">

【textarea】

<div id="example">
  <div>
    <span>Multiline message is:</span>
    <p style="white-space: pre-line">{{ message }}</p>    
  </div>
  <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    message:''
  }
})
</script>

<iframe style="width: 100%; height: 130px;" src="http://owbhsauev.bkt.clouddn.com/vue/form/f3.html" frameborder="0" width="320" height="240">

　　[注意]在文本区域插值( <textarea></textarea> ) 并不会生效，应用 v-model 来代替

【type:checkbox】

<div id="example">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    checked:false
  }
})
</script>

<iframe style="width: 100%; height: 40px;" src="http://owbhsauev.bkt.clouddn.com/vue/form/f4.html" frameborder="0" width="320" height="240">

<div id="example">
  <div>
    <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>  
  </div>
  <div>
   <span>Checked names: {{ checkedNames }}</span>  
  </div>
</div>

<script>
var example = new Vue({
  el: '#example',
  data:{
    checkedNames:[]
  }
})
</script>

<iframe style="width: 100%; height: 80px;" src="http://owbhsauev.bkt.clouddn