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事件列表解说
Dec 22 Javascript
JavaScript对象模型-执行模型
Apr 28 Javascript
javascript实现数字+字母验证码的简单实例
Feb 10 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
php 随机生成10位字符代码
2009/03/26 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
php通过各种函数判断0和空
2020/07/04 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
JavaScript类库D
2010/10/24 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
Js面试算法详解
2018/04/08 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
python获得图片base64编码示例
2014/01/16 Python
9种python web 程序的部署方式小结
2014/06/30 Python
python发送邮件功能实现代码
2016/07/15 Python
Python生成器以及应用实例解析
2018/02/08 Python
python绘制立方体的方法
2018/07/02 Python
python多进程读图提取特征存npy
2019/05/21 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
animation和transition的区别
2020/10/12 HTML / CSS
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
解除合同协议书
2014/04/17 职场文书
初一学生期末评语
2014/04/24 职场文书
护理目标管理责任书
2014/07/25 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
TensorFlow的自动求导原理分析
2021/05/26 Python
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL