v-model 自带绑定的number 、lazy 、debounce属性

1.vue2.0 版本带有debounce 的 v-model 移除了，移除的原因：

Debouncing 曾经被用来控制 Ajax 请求及其它高耗任务的频率。Vue 中v-model的 debounce 属性参数使得在一些简单情况下非常容易实现这种控制。但实际上，这是控制了状态更新的频率，而不是控制高耗时任务本身。这是个微小的差别，但是会随着应用增长而显现出局限性。


<!--
通过使用 lodash 或者其它库的 debounce 函数，
我们相信 debounce 实现是一流的，
并且可以随处使用它，不仅仅是在模板中。
-->
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script><div id="debounce-search-demo"><input v-model="searchQuery" placeholder="Type something"><strong>{{ searchIndicator }}</strong>
</div>

这种方式的另外一个优点是：当包裹函数执行时间与延时时间相当时，将会等待较长时间。比如，当给出搜索建议时，要等待用户输入停止一段时间后才给出建议，这个体验非常差。其实，这时候更适合用 throttling 函数。因为现在你可以自由的使用类似 lodash 之类的库，所以很快就可以用 throttling 重构项目。

new Vue({el: '#debounce-search-demo',data: {searchQuery: '',searchQueryIsDirty: false,isCalculating: false},computed: {searchIndicator: function () {if (this.isCalculating) {return '⟳ Fetching new results'} else if (this.searchQueryIsDirty) {return '... Typing'} else {return '✓ Done'}}},watch: {searchQuery: function () {this.searchQueryIsDirty = truethis.expensiveOperation()}},methods: {// 这是 debounce 实现的地方。expensiveOperation: _.debounce(function () {this.isCalculating = truesetTimeout(function () {this.isCalculating = falsethis.searchQueryIsDirty = false}.bind(this), 1000)}, 500)}
})

2.lnumber 属性：

如果想将用户的输入自动转换为Number类型（若原值的转换结果为NaN，则返回原值），则可添加一个number特性。使用方法：

3.lazy 属性：

默认情况下，v-model在input事件中同步输入的值与数据，我们可以添加一个lazy特性，从而将数据改到在change事件中发生。使用方法如下：

eg1：<input v-model.lazy="name">

eg2：

<body>

</body>

var exampleVM2 = new Vue({

el:'#example',

data:{

msg:'内容是在change事件后才改变的~'

}

})

</script>

v-model 自带绑定的number 、lazy 、debounce属性相关推荐

Vue Angular 双向绑定检测不到对象属性的添加和删除
由于ES5的限制 Vue && Angular 双向绑定检测不到对象属性的添加和删除还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都s ...
C# WCF WinCE 解决方案错误提示之：已超过传入消息(65536)的最大消息大小配额。若要增加配额，请使用相应绑定元素上的 MaxReceivedMessageSize 属性...
C# WCF WinCE 解决方案错误提示之:已超过传入消息(65536)的最大消息大小配额.若要增加配额,请使用相应绑定元素上的 MaxReceivedMessageSize 属性网上的解决方案 ...
【WPF】WPF通过RelativeSource绑定父控件的属性
1.后台代码实现绑定父控件的属性 RelativeSource rs = new RelativeSource(RelativeSourceMode.FindAncestor); //设定为离自己控件 ...
Python编程语言学习：python语言中快速查询python自带模块函数的用法及其属性方法、如何查询某个函数关键词的用法、输出一个类或者实例化对象的所有属性和方法名之详细攻略
Python编程语言学习:python语言中快速查询python自带模块&函数的用法及其属性方法.如何查询某个函数&关键词的用法.输出一个类或者实例化对象的所有属性和方法名之详细攻略 ...
Vue之for列表渲染、methods事件和model表单绑定
2.4 for列表渲染文档:https://cn.vuejs.org/v2/guide/list.html v-for指令可以绑定数组的数据来渲染一个项目列表 v-for指令需要使用item in ...
什么是V Model(V模型)
v-model是一种软件生存期模型,由Paul Rook在1980年率先提出的,在1990年出现在英国国家计算中心的出版物中,旨在提高软件开发的效率和有效性,是我们熟知的瀑布模型的一种改进,瀑布模型( ...
v html是双向绑定吗,vue自定v-model实现表单数据双向绑定问题
vue.js的一大功能便是实现数据的双向绑定,本文给大家介绍vue自定v-model实现表单数据双向绑定,具体内容如下所示: 子组件代码如下 v-model语法糖 v-model实现了表单输入的双向绑 ...
python连oracle数据库参数变量_带绑定字符串变量的Python cx_Oracle SQL
我在使用Python为Oracle数据库创建SQL查询时遇到了一个问题. 我想绑定字符串变量,但它不起作用,你能告诉我我做错了什么吗? 这是我的代码:import cx_Oracle dokList ...
Unreal Engin_Maya插件ArtV1_001初认Artv1创建一个带绑定的人物对其进行简单的设置
ArtV1 该插件是应用与虚幻引擎中对动画动作的快捷插件,在我现在的认知范围内是一个可以直接到处到虚幻中动作的一个很方便的插件. 如何下载: 首先可以在虚幻商城中收缩ARTV1 ...
v-on绑定特性命名带小横杠 ‘-’与props属性中变量怎么对应
特性命名问题: 矛盾点一:html的特性不区分大小写矛盾点二:Vue中除了模板命名,其他命名不允许出现小横杠 '-' 在js文件内,命名为驼峰式,camerCase,进入html文件,自动转换成短横 ...

v-model 自带绑定的number 、lazy 、debounce属性

v-model 自带绑定的number 、lazy 、debounce属性相关推荐

最新文章

热门文章