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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
js操作select控件的几种方法
Jun 02 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
Mar 18 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
图文讲解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
php数组编码转换示例详解
2014/03/11 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP实现货币换算的方法
2014/11/29 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
php实现图片缩略图的方法
2016/03/29 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
2017/05/13 jQuery
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
Python脚本实现集群检测和管理功能
2015/03/06 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Django和Flask框架优缺点对比
2019/10/24 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
放牛班的春天观后感
2015/06/01 职场文书
重阳节主题班会
2015/08/17 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
基于PyQt5制作一个群发邮件工具
2022/04/08 Python