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、效果: