您的位置：首页 > 其它

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

2018-10-11 21:33 106 查看

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

       Debouncing 曾经被用来控制 Ajax 请求及其它高耗任务的频率。Vue 中

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

[code]
<!--
通过使用 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 重构项目。

 

[code]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 = true
this.expensiveOperation()
}
},
methods: {
// 这是 debounce 实现的地方。
expensiveOperation: _.debounce(function () {
this.isCalculating = true
setTimeout(function () {
this.isCalculating = false
this.searchQueryIsDirty = false
}.bind(this), 1000)
}, 500)
}
})


2.lnumber 属性：

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

<input v-model.number="age" type="number">

3.lazy 属性：

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

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

eg2：

<body>

  <input v-model.lazy="msg"/>

  {{msg}}

</body>

<script>

  var exampleVM2 = new Vue({

    el:'#example',

    data:{

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

    }

  })

</script>

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航