v-model的修饰符,lazy和number,vue1.x中的debounce已被移除
2019-04-21 13:04
225 查看
为什么突然想起来写这个问题呢,因为这两天接了一个优化任务,以前的老代码了,看到了debounce参数,在vue2.x中这个参数被移除了。简单的说一下v-model从1.x升级到2以后的变化,免得大家搞错了写法而一头雾水。
vue1.x版本中,v-model有number,lazy,debounce三个参数,升级到2.x版本后,number和lazy以修饰符的形式使用,这样看起来更加的清晰明了。debounce被设计用来控制 Ajax 请求及其它高耗任务的频率,但随着应用的增长,有一定的局限性。例如在设计一个搜索提示时就有局限性,本身需要控制的只是搜索的延迟,但debounce控制的却是数据从视图层到数据层的延迟。废话不多说,看下面例子。
lazy和number从参数变成修饰符,写法变化如下:
以前的 <input v-model="name" lazy> <input v-model="age" type="number" number> 现在的 <input v-model.lazy="name"> <input v-model.number="age" type="number">
下面介绍一下这些修饰符。
1)v-model.lazy ,将 视图层数据 与 数据层数据 的 同步 转变为在change事件中发生。
<template> <div class="demoLazy"> <input type="text" v-model.lazy="msg"> <br> <span>{{msg}}</span> </div> </template> <script> export default { data(){ return{ msg:"我是番茄" } } } </script>
效果:
加了lazy修饰符,在输入框失焦或者按了enter,数据才改变
不加lazy修饰符,输入数据即改变
2)v-model.number 将输入的字符串转换成number
<template> <div class="demoLazy"> <input type="text" v-model.number="num1"> <span>+</span> <input type="text" v-model.number="num2"> <span>={{sum}}</span> </div> </template> <script> export default { data(){ return{ num1:0, num2:0 } }, computed:{ sum(){ return this.num1 + this.num2 } } } </script>
有number修饰符时,虽然我把input给了type为text,数据层的值依然被转换为了number。如图所示:
无number修饰符时,两个数字为字符串,将会是字符串拼接,如图所示:
两个修饰符就写了这么长,这篇文章就先结个尾,debounce移除了,在vue2.x中我们想用延迟操作怎么做比较合适呢?娃哈哈,我还是再写一篇吧。
相关文章推荐
- v-model 自带绑定的number 、lazy 、debounce属性
- Vue的v-model的几种修饰符.lazy,.number和.trim的介绍
- v-model的debounce局限性在哪,应该如何去控制高耗任务的频率
- android Settings中About Phone的Model number等信息的修改
- jsf primefaces中commandbutton刷新页面bug,lazymodel的datatable查询及重置问题
- 移除input type="number"的上下箭头
- v-model指令及其修饰符
- 【iOS】Swift LAZY 修饰符和 LAZY 方法
- AOSP: 修改 android 设备的 model number
- ng-model 指令根据表单域的状态添加/移除以下类:
- 【iOS】Swift LAZY 修饰符和 LAZY 方法
- ASP.NET MVC4中的Model验证 移除指定验证信息
- 说说 Vue.js v-model 指令的修饰符
- 希捷硬盘产品Model Number分析
- IEnumber<Model.Category> 实现接口对象没有Add()方法解决问题
- 移除HTML5 input在type="number"时的上下小箭头
- android Settings中About Phone的Model number等信息的修改
- 【转】移除HTML5 input在type="number"时的上下小箭头
- [AngularJS] Angular 1.3: ng-model-options updateOn, debounce
- can't read model: number of return field is not correct