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

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

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

    

    
    {{ searchIndicator }}

这种方式的另外一个优点是：当包裹函数执行时间与延时时间相当时，将会等待较长时间。比如，当给出搜索建议时，要等待用户输入停止一段时间后才给出建议，这个体验非常差。其实，这时候更适合用 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 = 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特性。使用方法：

3.lazy 属性：

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

eg1：

eg2：

 

  {{msg}}