1、前言：最近的项目需求中，对有些数字的变化，客户提了需求，加一些加载效果用户体验会更好。所以用了vue-animate-number 这一款插件

2、案例: https://wangdahoo.github.io/vue-animate-number
      vue-animate-number地址: https://github.com/wangdahoo/vue-animate-number

3、

①、安装vue-animate-number插件

npm install vue-animate-number 

 ②、 在main.js中引入

import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)

③、在对应的组件中使用

<div class="middle_leftCont" v-for="(item,index) in middle_leftArr" :key="index">
                <div class="middle_leftText">
                  <p class="middle_leftTit">{{item.name}}</p>
                  <p class="middle_leftNum">
                    <animate-number from="0" :to="item.num" duration="2000"></animate-number>
                  </p>
                </div>
              </div>

 data: function() {
    return {
      middle_leftArr: [
        {
          name: "企业数量",
          num: 0     //  例如：初始值是 0 ，请求接口成功后数值是：  5
        },
        {
          name: "瓶颈企业",
          num: 205
        },
          name: "产品数量",
          num: 18335
        },
        {
          name: "订单数量",
          num: 348
        }
      ],
    };
  },

4、 如果数据是动态获取，也就是在请求接口成功后,会重新赋值，改变数组中的某个数值。（ 例如：企业数量初始值是 0 ，请求接口成功后数值是：  5）。但是新的数据页面不会渲染，还是那拿最初始的值去渲染，这并不是我们想要的结果。

解决方法：

// 添加一个key值 等于item.num

<animate-number from="0" :to="item.num" :key="item.num" duration="2000"></animate-number>

5、效果：