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

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

6.1 基本用法

表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用它们可以完成数据的录入、校验、提交等。
Vue.js提供了v-model指令，用于在表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。

 例如下面的例子：

 
 
输入的内容是：{{message}}

在输入框输入的同时，{{message}}也会实时将内容渲染在视图中。

 如图6-1所示：

对于文本域也是同样的用法：<br> </p> <div class="jb51code"> <pre class="brush:js;"> <div id="app"> <textarea v-model="text" placeholder="请输入...">

输入的内容是：

{{text}}

提示：

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

 
 
输入的内容是：{{message}}

来看看更多的表单控件。

单选按钮：

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

 
 单选按钮

如果是组合使用来实现互斥选择的效果，就需要v-model配合value来使用：

 
 HTML
 
 
 JavaScript
 
 
 CSS
 
 
您选择的是：{{picked}}

数据picked的值与表单按钮的value值一致时，就会选中该项，所以当前状态下选中的是第二项。
 如图6-2所示：

复选框：

复选框也分单独使用和组合使用，不过用法稍与单选不同。

 复选框单独使用时，也是用v-model来绑定一个布尔值。

 例如：

 
 选择状态：{{checked}}

在勾选时，数据checked的值改为了true，中渲染的内容也会更新。

组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数据当中，就会选中这一项。

 这一过程也是双向的，在勾选时，value的值也会自动push到这个数组中。

 实例代码如下：

 
 HTML
 

 
 JavaScript
 

 
 CSS
 

 
你选择的是：{{checked}}

当前状态下的结果如图6-3所示：

选择列表：

选择列表就是下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。
 先看一下单选的示例代码：

 
 html
 JavaScript
 css
 
 
你选择的是：{{selected}}

是备选项，如果含有value属性，v-model就会优先匹配value的值； 

如果没有，就会直接匹配的text。

 比如选中第二项时，selected的值为js，而不是JavaScript。

给添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框用法类似。
 实例代码如下：

html JavaScript css

你选择的是：{{selected}}