我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。
1 基础用法
1.1 文本输入框（text）
这里演示了在文本输入框上输入的内容，会实时映射到绑定的数据上。
html：
<div> <input type="text" v-model="content" placeholder="请输入"> <p>输入框：{{content}}</p> </div>
js：
<script> var app = new Vue({ el: '#app', data: { content: '' } }); </script>
效果：
1.2 大文本输入框（textarea）
绑定方法与文本输入框相同。
html：
<div> <textarea v-model="content" placeholder="请输入"></textarea> <p>内容：</p> <p>{{content}}</p> </div>
js：
var app2 = new Vue({ el: '#app2', data: { content: '' } });
效果：
这里对展示的内容所对应的 <p> 元素加了 white-space: pre 样式，这样内容即使带有回车符也会保留。
--------------------------------------------------------------------------------
注意：表单控件所显示的值只依赖于所绑定的数据，所以即便设置了表单控件中的 value值，也不会起作用哦。同理，<textarea>xxx</textarea>之间的值也无效。
之前的示例我们可以发现，使用中文输入法时，只有确定选中的词语，才会被如果 Vue.js 所更新。如果希望输入的内容实时更新，那么可以使用 @input。
html：
<div> <textarea @input="inputHandler" placeholder="请输入"></textarea> <p>内容：</p> <p>{{content}}</p> </div>
js：
var app3 = new Vue({ el: '#app3', data: { content: '' }, methods: { inputHandler: function (event) { this.content = event.target.value; } } });
可以看出，即使在 @input 定义的函数不带参数，Vue.js 也会在定义的函数（示例中的 inputHandler）中传入 event 原生事件对象。
效果：
1.3 单选框
单选框一般都有多个条件可供选择，既然是单选框，自然希望实现互斥效果，我们可以使用 v-model 指令配合单选框的 value 来实现。
html：
<div> <input type="radio" v-model="checked" value="文学"> <label for="radio1">文学</label> <input type="radio" v-model="checked" value="艺术"> <label for="radio2">艺术</label> <input type="radio" v-model="checked" value="经济"> <label for="radio3">经济</label> <br> <p>选择了：{{checked}}</p> </div>
js：
var app4 = new Vue({ el: '#app4', data: { checked: '文学' } });
效果：
1.4 复选框
复选框的绑定方式与单选框相同，只不过复选框所对应的数据类型是数组罢了。
html：
<div> <input type="checkbox" v-model="checked" value="文学"> <label for="checkbox1">文学</label> <input type="checkbox" v-model="checked" value="艺术"> <label for="checkbox2">艺术</label> <input type="checkbox" v-model="checked" value="经济"> <label for="checkbox3">经济</label> <br> <p>选择了：{{checked}}</p> </div>
js：
var app5= new Vue({ el: '#app5', data: { checked: ['文学','艺术'] } });
效果：
1.5 下拉选择框
1.5.1 单选
html：
<div> <select v-model="selected"> <option value="1">文学</option> <option value="2">艺术</option> <option>经济</option> </select> <br> <p>选择了：{{selected}}</p> </div>
js：
var app6 = new Vue({ el: '#app6', data: { selected: '1' } });
效果：
可以看出，如果 <option> 含有 value 值，则会先匹配该值；如果没有，则匹配 <option> 中的 text 值（比如示例中的 <option>经济</option>）。
1.5.2 多选
为 <select> 标签添加 multiple 属性，即可实现多选。
html：