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

更新时间：2019年04月29日 10:59:34 作者：张董

表单类控件承载了一个网页数据的录入与交互，本章将介绍如何使用指令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时不选。
例如：

<div id="app">
 <input type="radio" :checked="picked">
 <label>单选按钮</label>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 picked: true
 }
 });
</script>

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

<div id="app">
 <input type="radio" v-model="picked" value="html" id="html">
 <label for="html">HTML</label>
 
 <input type="radio" v-model="picked" value="js" id="js">
 <label for="js">JavaScript</label>
 
 <input type="radio" v-model="picked" value="css" id="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所示：

复选框：

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

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

例如：

<div id="app">
 <input type="checkbox" v-model="checked" id="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 id="app">
 <input type="checkbox" v-model="checked" value="html" id="html">
 <label for="html">HTML</label>
 <br>
 <input type="checkbox" v-model="checked" value="js" id="js">
 <label for="js">JavaScript</label>
 <br>
 <input type="checkbox" v-model="checked" value="css" id="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所示：

选择列表：

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

<div id="app">
 <select v-model="selected">
 <option>html</option>
 <option value="js">JavaScript</option>
 <option>css</option>
 </select>
 <p>你选择的是：{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: "html"
 }
 });
</script>

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

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

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

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

<div id="app">
 <select v-model="selected" multiple>
 <option>html</option>
 <option value="js">JavaScript</option>
 <option>css</option>
 </select>
 <p>你选择的是：{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: ["html", "js"]
 }
 });
</script>

在业务中，<option>经常用v-for动态输出，value和text也是用v-bind来动态输出的。
例如：

<div id="app">
 <select v-model="selected">
 <option v-for="item in options" :value="item.value">{{item.text}}</option>
 </select>
 <p>你选择的是：{{selected}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 options: [
 {text:"HTML", value:"html"},
 {text:"JavaScript", value:"js"},
 {text:"CSS", value:"css"},
 ],
 selected: "html"
 }
 });
</script>

虽然用选择列表<select>控件可以很简单地完成下拉选择的需求，但是在实际业务中反而不常用，因为它的样式依赖平台和浏览器，无法统一，也不太美观，功能也受限，，比如不支持搜索，所以常见的解决方案是用<div>moi一个类似的控件。

当阅读完第7章组件的内容后，可以尝试编写一个下拉选择器的通用组件。

6.2 绑定值

上一节介绍的单选按钮、复选框和选择列表在单独使用或单选的模式下，v-model绑定的值是一个静态字符串或布尔值。
但在业务中，有时需要绑定一个动态的数据，这时可以用v-bind来实现。

单选按钮：

<div id="app">
 <input type="radio" v-model="picked" :value="value">
 <label>单选按钮</label>
 <p>{{picked}}</p>
 <p>{{value}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 picked: false,
 value: 123
 }
 });
</script>

在选中时，app.picked===app.value，值都是123。

复选框：

<div id="app">
 <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
 <label>复选框</label>
 <p>{{toggle}}</p>
 <p>{{value1}}</p>
 <p>{{value2}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 toggle: false,
 value1: "a",
 value2: "b"
 }
 });
</script>

勾选时，app.toggle===app.value1；

未勾选时，app.toggle===app.value2。

选择列表：

<div id="app">
 <select v-model="selected">
 <option :value="{number:123}">123</option>
 </select>
 {{selected.number}}
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 selected: ""
 }
 });
</script>

当选中时，app.selected是一个Object，所以app.selected.number===123。

6.3 修饰符

与事件的修饰符类似，v-model也有修饰符，用于控制数据同步的时机。

.lazy：

在输入框中，v-model默认是在input事件中同步输入框的数据(除了提示中介绍的中文输入法情况外)。

使用修饰符.lazy会转变为在change事件中同步，示例代码如下：

<div id="app">
 <input type="text" v-model.lazy="message">
 <p>{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

这是，message并不是实时改变的，而是在失焦或按回车时才更新。

.number：

使用修饰符.number可以将输入转换为Number类型，否则虽然你输入的是数字，但它的类型其实是String。
比如在数字输入框时会比较有用，示例代码如下：

<div id="app">
 <input type="number" v-model.number="message">
 <p>{{typeof message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: 123
 }
 });
</script>

.trim：

修饰符.trim可以自动过滤输入的首尾空格，示例代码如下：

<div id="app">
 <input type="text" v-model.trim="message">
 <p>{{message}}</p>
</div>

<script>
 var app = new Vue({
 el: "#app",
 data: {
 message: ""
 }
 });
</script>

从Vue.js 2.x开始，v-model还可以用于自定义组件，满足定制化的需求，在下一节会介绍。

以上所述是小编给大家介绍的Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

Vue数据双向绑定原理及简单实现方法
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.本文重点给大家介绍Vue数据双向绑定原理及简单实现方法，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-05-05
如何用vue封装axios请求
对axios进行封装以及将API接口按业务模块统一管理，有助于我们简化代码，方便后期维护。本文介绍了如何用vue封装axios请求，感兴趣的同学，可以参考下。
2021-06-06
详解在Vue.js编写更好的v-for循环的6种技巧
这篇文章主要介绍了详解在Vue.js编写更好的v-for循环的6种技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
vue前端实现导出页面为pdf(分页导出、不分页导出及分模块导出)
在实际应用中可能用户希望将系统中一个页面展示的所有数据报表,用PDF的文件格式下载下来,以便于其他用途,这篇文章主要给大家介绍了关于vue前端实现导出页面为pdf(分页导出、不分页导出及分模块导出)的相关资料,需要的朋友可以参考下
2024-06-06
Vue验证码60秒倒计时功能简单实例代码
这篇文章主要介绍了Vue验证码60秒倒计时功能简单实例代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-06-06
vue cli3.x打包后如何修改生成的静态资源的目录和路径
这篇文章主要介绍了vue cli3.x打包后如何修改生成的静态资源的目录和路径，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue3中插槽(slot)用法汇总(推荐)
这篇文章主要介绍了Vue3中插槽(slot)用法汇总,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
Vue脚手架配置代理服务器的两种方式(小结)
本文主要介绍了Vue脚手架配置代理服务器的两种方式(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
vue2 拖动排序 vuedraggable组件的实现
这篇文章主要介绍了vue2 拖动排序 vuedraggable组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
这篇文章主要介绍了vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造,home.vue 组件有了两个属性：navs 和 tts 属性，具体实例代码大家跟随小编一起通过本文学习吧
2018-09-09