VUE实现表单元素双向绑定(总结)
本文介绍了VUE实现表单元素双向绑定(总结) ,分享给大家,具体如下:
checkbox最基本用法:
<input type="checkbox" v-model="inputdata" checked/> <input type="checkbox" v-model="inputdata"/> <input type="checkbox" v-model="inputdata"/> new Vue({ el:".......", data:{ inputdata:false //逻辑类型 } ready:function(){ console.log(this.inputdata)//true } })
规则1:如果v-model绑定的变量类型为boolean,若input被选中,this.inputdata为true,否则this.inputdata为false。
inputdata变量初始设置为false,但是在页面进行编译时,因为第一个input为选中状态,所以更新inputdata为true,那么渲染结束之后三个input均为选中状态,且三个input状态同步。
<input type="checkbox" value="a" v-model="inputdata" checked/> <input type="checkbox" value="b" v-model="inputdata"/> <input type="checkbox" value="c" v-model=""inputdata" checked/> new Vue({ el:".......", data:{ inputdata:[]//数组类型 } ready:function(){ console.log(this.inputdata)//[a,c] } })
规则2:如果v-model绑定的变量类型为数组,那么绑定该变量的元素若被选中,把该元素的value值添加进数组,若不被选中,那么把该元素的value从数组中去除。
所以在v-model绑定的变量类型是数组的情况下,务必设置绑定该变量的每个元素的value值,且value值不要相等。见上例。
radio基本用法
<input type="radio" value="a" v-model="inputdata" /> <input type="radio" value="b" v-model="inputdata" checked/> <input type="radio" value="c" v-model="inputdata" checked/> new Vue({ el:".......", data:{ inputdata:"a" } ready:function(){ console.log(this.inputdata)// c } })
规则:v-model绑定的变量值如果等于input元素其中一个value值,那么该表单元素会被选中,如果不等于任何input的value值,所有相关元素不选中。同时如果选中某个input元素,那么该元素的value值就会被赋给该变量,页面重新渲染。
如上,初始this.inputdata为"a",在编译到第二个input时,因为属性为checked表示选中,该元素value为"b",所以this.inputdata值为"b",然后编译到第三个input时,同样存在checked,所以this.inputdata为"c"。编译结束后,this.inputdata值为"c",页面最终渲染效果为第三个被选中,前两个未被选中。
select基本用法
<select v-model="selected"> <option>A</option> <option selected>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected | json }}</span> new Vue({ el:"....", data:{ selelcted:"A" } })
规则:v-model绑定的变量值如果等于option元素其中一个value值,那么该元素会被选中。同时如果选中某个option元素,那么该元素的value值就会被赋给该变量。
如上,初始this.selected为"A",在编译到第二个option时,因为属性为selected表示选中,该元素text值为"B"(如果option有value值,会优先value值),所以this.selected值为"B"。编译结束后,this.slected值为"B",页面最终渲染效果为第二个被选中。如果是可多选select下拉框,规则基本同checkbox的规则2
属性基本用法
lazy
在默认情况下,v-model 在input 事件中同步输入框值与数据,可以添加一个特性lazy,input值发生改变时,不会同步到绑定的变量
<input type="text" v-model="msg" lazy>//input值发生改变,msg不变
number
如果想自动将用户的输入转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个特性 number:
<input v-model="age" number>//默认输入框内的值为字符串,添加number,可以将输入值转换为数字在同步到age
debounce
设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用.
<input v-model="msg" debounce="500">//输入内容0.5秒后同步到msg vm.$watch({ 'msg':function(val,oldval){ } })
注意 debounce 参数不会延迟 input 事件:它延迟“写入”底层数据(所以不适合ajax请求事件)。因此在使用debounce 时应当用 vm.$watch() 响应数据的变化。
若想延迟 DOM 事件,应当使用debounce过滤器。
debounce过滤器
<input @keyup="onKeyup | debounce 500">//只要操作键盘间隔小于0.5秒,就不会发生onKeyup事件。
包装处理器,让它延迟执行 x ms, 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms, 如果在延迟结束前再次调用,延迟时长重置为 x ms。
用此过滤器非常适合做ajax请求
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- jQuery选择器大全(48个代码片段+21幅图演示)
- C# 如何在Excel 动态生成PivotTable
- RabbitMQ入门HelloWorld(C#)(翻译)
- Centos环境下搭建Asp.NET Core环境和安装Jexus
- Linux系统Java环境安装配置
- ASP.NET Core 依赖注入
- 使用Hive SQL插入动态分区的Parquet表OOM异常分析
- 基于STS和JWT的微服务身份认证
- 小程序前端开发基础框架,可直接用于开发
- “盲”逆向:iOS 应用 Blind 寻踪
- Redis应用及安装
- 微服务实践分享与探讨
- 微信小程序获取用户信息签名解密C#
- Docker的核心概念,镜像操作
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- jQueryWEUI使用picker实现二级联动
- ElasticSearch学习笔记(4)——基本操作
- 机器学习之支持向量机—SVM原理代码实现
- 前端性能分析工具利器
- Struts2拦截器
- Css制作hover下划线动画
- 算法数据结构 | 20行代码实现,使用Tarjan算法求解强连通分量
- Js获取系统当前时间展示
- Js反引号遍历数值
- Js传对象数组样式给后台
- ElasticSearch学习笔记(5)——SpringBoot整合ElasticSearch
- jQueryWEUI动态赋值select下拉框并获取value值
- Vue根据数据字段大小进行排列
- Vue里v-for循环双层数组
- Vue动态赋值video视频