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 this 深入理解
Jul 30 Javascript
Javascript 构造函数详解
Oct 22 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
jquery精度计算代码 jquery指定精确小数位
Feb 06 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
php数组合并的二种方法
2014/03/21 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
php实现登陆模块功能示例
2016/10/20 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
javascript实现链接单选效果的方法
2015/05/13 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
如何解决安装python3.6.1失败
2020/07/01 Python
配置管理计划的主要内容有哪些
2014/06/20 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
教师节座谈会主持词
2015/07/03 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers