Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

表单类控件承载了一个网页数据的录入与交互，本章将介绍如何使用指令v-model完成表单的数据双向绑定。

6.1 基本用法

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。
Vue.js提供了

v-model

指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。

 例如下面的例子：

<div id="app">
 <input type="text" v-model="message" placeholder="请输入...">
 <p>输入的内容是：{{message}}</p>
</div>
<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

在输入框输入的同时

，{{message}}

也会实时将内容渲染在视图中。

 如图6-1所示：

对于文本域<textarea>也是同样的用法：

<div id="app">
 <textarea v-model="text" placeholder="请输入..."></textarea>
 <p>输入的内容是：</p>
 <p style="white-space: pre;">{{text}}</p>
</div>
<script>
 var app = new Vue({
 el: "#app",
 data: {
 text: ""
 }
 });
</script>

提示：

 提示v-model后，表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性，对于在<textarea></textarea>之间插入的值，也不会生效。
 使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发鞥新。
 如果希望总是实时更新，可以用@input来替代v-model。
 事实上，v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。
 例如下面的示例：

<div id="app">
 <input type="text" @input="handleInput" placeholder="请输入...">
 <p>输入的内容是：{{message}}</p>
</div>
<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 },
 methods: {
 handleInput: function(event) {
 this.message = event.target.value;
 }
 }
 });
</script>

来看看更多的表单控件。

单选按钮：

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为true时选中，为false时不选。