Vue表单控件绑定图文详解


Posted in Javascript onFebruary 11, 2019

Vue 表单控件绑定的实现,具体可以通过以下步骤操作来实现。

1、基础用法

可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。

Vue表单控件绑定图文详解

2、Checkbox

单个勾选框,逻辑值:

Vue表单控件绑定图文详解

3、多个勾选框,绑定到同一个数组:

Vue表单控件绑定图文详解

Vue表单控件绑定图文详解

4、动态选项,用 v-for 渲染:

Vue表单控件绑定图文详解

5、值绑定

对于单选按钮,勾选框及选择框选项,v-model 绑定的值通常是静态字符串(对于勾选框是逻辑值):

Vue表单控件绑定图文详解

6、但是有时想绑定值到 Vue 实例一个动态属性上。可以用 v-bind 做到。 而且 v-bind允许绑定输入框的值到非字符串值。

Vue表单控件绑定图文详解

7、参数特性lazy

在默认情况下,v-model 在input 事件中同步输入框值与数据,可以添加一个特性lazy,从而改到在 change 事件中同步:

Vue表单控件绑定图文详解

8、debounce

debounce 设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用。

Vue表单控件绑定图文详解

9、注意 debounce 参数不会延迟 input 事件:它延迟“写入”底层数据。因此在使用 debounce时应当用 vm.$watch() 响应数据的变化。若想延迟 DOM 事件,应当使用 debounce 过滤器。注意 debounce 参数不会延迟 input 事件:它延迟“写入”底层数据。因此在使用 debounce时应当用 vm.$watch() 响应数据的变化。若想延迟 DOM 事件,应当使用 debounce 过滤器。

Javascript 相关文章推荐
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
JS循环遍历JSON数据的方法
Jul 08 Javascript
JS扩展方法实例分析
Apr 15 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
图文讲解vue的v-if使用方法
Feb 11 #Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 #Javascript
ES6 更易于继承的类语法的使用
Feb 11 #Javascript
总结4个方面优化Vue项目
Feb 11 #Javascript
JavaScript 九种跨域方式实现原理
Feb 11 #Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 #Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 #Javascript
You might like
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
php数组添加元素方法小结
2014/12/20 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
js微信支付实现代码
2016/12/22 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
原生小程序封装跑马灯效果
2020/10/21 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
详解Python中的type和object
2018/08/15 Python
深入了解Python 变量作用域
2020/07/24 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
异地年检委托书范本
2014/09/24 职场文书
公司法定代表人授权委托书
2014/09/29 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
MySQL Server层四个日志的实现
2022/03/31 MySQL