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 相关文章推荐
JS中==与===操作符的比较
Mar 21 Javascript
JS 中document.URL 和 windows.location.href 的区别
Nov 11 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jquery实现弹出层效果实例
May 19 Javascript
javascript运动详解
Jul 06 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
JavaScript创建、读取和删除cookie
Sep 03 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
Yii使用CLinkPager分页实例详解
2014/07/23 PHP
php之curl设置超时实例
2014/11/03 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
js表头排序实现方法
2015/01/16 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
Python复制目录结构脚本代码分享
2015/03/06 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Python3 读取Word文件方式
2020/02/13 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
python爬虫 requests-html的使用
2020/11/30 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
共青团员自我评价范文
2014/09/14 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书