VUE实现表单元素双向绑定(总结)


Posted in Javascript onAugust 08, 2017

本文介绍了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请求

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
利用JS判断鼠标移入元素的方向
Dec 11 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
ES6模块化的import和export用法方法总结
Aug 08 #Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 #Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 #Javascript
vue-quill-editor实现图片上传功能
Aug 08 #Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 #Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 #Javascript
基于Vue实现支持按周切换的日历
Sep 24 #Javascript
You might like
玩转虚拟域名◎+ .
2006/10/09 PHP
joomla内置的表单验证功能使用方法
2010/06/11 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
两种php实现图片上传的方法
2016/01/22 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
js身份证验证超强脚本
2008/10/26 Javascript
js select常用操作控制代码
2010/03/16 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
浅谈flask源码之请求过程
2018/07/26 Python
python解析yaml文件过程详解
2019/08/30 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
python可迭代对象去重实例
2020/05/15 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
实用求职信范文分享
2013/12/25 职场文书
临时租车协议范本
2014/09/23 职场文书
体育个人工作总结
2015/02/09 职场文书
单位证明范文
2015/06/18 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Python之matplotlib绘制饼图
2022/04/13 Python