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实现自定义标签
May 08 Javascript
学习ExtJS Column布局
Oct 08 Javascript
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
一个简单不报错的summernote 图片上传案例
Jul 11 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
Ajax实现异步加载数据
Nov 17 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
PHP中对数据库操作的封装
2006/10/09 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
PHP基本语法总结
2014/09/06 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
详解python里的命名规范
2018/07/16 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python整数对象实现原理详解
2019/07/01 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python猴子补丁知识点总结
2020/01/05 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
电气工程和自动化自荐信范文
2013/12/25 职场文书
运动会邀请函范文
2014/02/06 职场文书
优秀广告词大全
2014/03/19 职场文书
护校行动方案
2014/05/31 职场文书
品质口号大全
2014/06/17 职场文书
城管年度个人总结
2015/02/28 职场文书
商务司机岗位职责
2015/04/10 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
Django与数据库交互的实现
2021/06/03 Python