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 获取radio按钮值的实例
Aug 17 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
限制只能输入数字的实现代码
May 16 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
Javascript实现单选框效果
Dec 09 Javascript
JS继承最简单的理解方式
Mar 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
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
php支付宝接口用法分析
2015/01/04 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
python安装教程 Pycharm安装详细教程
2017/05/02 Python
python编程羊车门问题代码示例
2017/10/25 Python
python实现大文本文件分割
2019/07/22 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
班干部演讲稿
2014/04/24 职场文书
团代会宣传工作方案
2014/05/08 职场文书
建筑投标担保书
2014/05/20 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
面试自我评价范文
2014/09/17 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
暑期家教宣传单
2015/07/14 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL