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操作页面表格,元素的一些技巧
Feb 02 Javascript
JavaScript 创建对象
Jul 17 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP _construct()函数讲解
2019/02/03 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
js获取页面description的方法
2015/05/21 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
python使用PIL和matplotlib获取图片像素点并合并解析
2019/09/10 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
审核会计岗位职责
2013/11/08 职场文书
认识深刻的检讨书
2014/02/16 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
中秋节国旗下演讲稿
2014/09/05 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
销售开票员岗位职责
2015/04/15 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
辩论赛新闻稿
2015/07/17 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
Python3的进程和线程你了解吗
2022/03/16 Python
vue elementUI批量上传文件
2022/04/26 Vue.js