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


Posted in Javascript onApril 29, 2019

表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令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所示:

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

对于文本域<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所示:

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

复选框:

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

 复选框单独使用时,也是用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所示:

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

选择列表:

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

<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完成表单的数据双向绑定,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
微信小程序-form表单提交代码实例
Apr 29 #Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 #Javascript
微信小程序传值以及获取值方法的详解
Apr 29 #Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 #Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 #Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 #Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 #Javascript
You might like
php 页面执行时间计算代码
2008/12/04 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
用jquery来定位
2007/02/20 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
微信小程序分享海报生成的实现方法
2018/12/10 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
python属于软件吗
2020/06/18 Python
什么是python的函数体
2020/06/19 Python
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
数据库的约束含义
2012/09/09 面试题
打架检讨书100字
2014/01/19 职场文书
英语国培研修感言
2014/02/13 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
网络研修心得体会
2016/01/08 职场文书
二年级数学教学反思
2016/02/16 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers