model完成表单的数据双向绑定

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

6.1 基本用法

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

例如下面的例子:

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

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

如图6-1所示:

model完成表单的数据双向绑定

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

<div> <textarea v-model="text" placeholder="请输入..."></textarea> <p>输入的内容是:</p> <p>{{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> <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时不选。
 例如:

<div> <input type="radio" :checked="picked"> <label>单选按钮</label> </div> <script> var app = new Vue({ el: "#app", data: { picked: true } }); </script>

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

<div> <input type="radio" v-model="picked" value="html"> <label for="html">HTML</label> <input type="radio" v-model="picked" value="js"> <label for="js">JavaScript</label> <input type="radio" v-model="picked" value="css"> <label for="css">CSS</label> <p>您选择的是:{{picked}}</p> </div> <script> var app = new Vue({ el: "#app", data: { picked: "js" } }); </script>

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

model完成表单的数据双向绑定

复选框:

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

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

例如:

<div> <input type="checkbox" v-model="checked"> <label for="checked">选择状态:{{checked}}</label> </div> <script> var app = new Vue({ el: "#app", data: { checked: false } }); </script>

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

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

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

实例代码如下:

<div> <input type="checkbox" v-model="checked" value="html"> <label for="html">HTML</label> <br> <input type="checkbox" v-model="checked" value="js"> <label for="js">JavaScript</label> <br> <input type="checkbox" v-model="checked" value="css"> <label for="css">CSS</label> <br> <p>你选择的是:{{checked}}</p> </div> <script> var app = new Vue({ el: "#app", data: { checked: ["html", "css"] } }); </script>

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

model完成表单的数据双向绑定

选择列表:

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/23eedea4b483f9ef29471998fac4816e.html