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特性。使用方法:

<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>

猜你喜欢

转载自blog.csdn.net/weixin_38199437/article/details/83018953
0条评论
添加一条新回复