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 = 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：<input v-model.lazy="name">

eg2：

<body>

</body>

var exampleVM2 = new Vue({

el:'#example',

data:{

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

}

})

</script>

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

猜你喜欢