vue动态数字

by yakun chen

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<body>
  <input v-model="number">
  <animated-number :number="number"></animated-number>
</body>

JavaScript

Vue.component('animated-number', {
  template: "<div class='animated-number'>{{displayNumber}}</div>",
  props: {
    'number': {
      default: 0
    }
  },
  data: function() {
    return {
      displayNumber: 0,
      interval: false
    }
  },

  ready: function() {
    this.displayNumber = this.number ? this.number : 0;
  },

  watch: {

    number: function() {

      clearInterval(this.interval);

      if (this.number == this.displayNumber) {
        return;
      }

      this.interval = window.setInterval(function() {

        if (this.displayNumber != this.number) {

          var change = (this.number - this.displayNumber) / 10;

          change = change >= 0 ? Math.ceil(change) : Math.floor(change);

          this.displayNumber = this.displayNumber + change;

        }

      }.bind(this), 20);

    }

  }
})

new Vue({

  el: 'body',

});