在写首页时，遇到展示数据量，常常直接将其展示出来，没有动态效果，显得干巴巴的。vue中的一些插件可以解决这个问题，下面推荐一个，此插件的文档不是很详细，记录下使用

$ npm install vue-animate-number

代码如下：

main.js

// 数字动效
import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)

<el-row :gutter="24" class="box1">
            <el-col :span="6" v-for="item in homeTopList" :key="item.image">
                <el-card class="box-card grid-content bg-purple" shadow="never"
                         :body-style="{padding: '10px 20px'}">
                    <div class="body">
                        <div class="body-left">
                            <div class="body-left-image">
                                <img :src="item.image" height="64" width="64" alt="">
                            </div>
                        </div>
                        <div class="body-right">
                            <div class="body-right-title">
                                {{ item.text }}
                            </div>
                            <div class="body-right-content">
                                <animate-number ref="myNum"
                                                mode="manual"
                                                :formatter="formatToScore"
                                                :key="item.text"
                                                :from="0"
                                                :to="item.value"></animate-number>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

export default {
    name: "home",
    data() {
        return {
            homeTopList: [
                {image: require('@/assets/home/increase.svg'), text: '今日新增', value: 0},
                {image: require('@/assets/home/total.svg'), text: '总数量', value: 0},
                {image: require('@/assets/home/suggest.svg'), text: '建议数量', value: 0},
                {image: require('@/assets/home/complaints.svg'), text: '投诉数量', value: 0},
            ],
            chartBoxHeight: null,
        }
    },
    methods: {
        // 格式化得分
        formatToCount(value) {
            // 保留两位小数，在此代码中没用，在包含小数的数据中有用
            if (value !== parseInt(value)) {
                return value.toFixed(2);
            }
            return value;
        },
        getHomeData() {
            reqGetHomeData().then(res => {
                if (res.rel) {
                    const {data} = res;

                    this.$set(this.homeTopList[0], 'value', data.newlyAddToday || 0); // 今日新增
                    this.$set(this.homeTopList[1], 'value', data.allCount || 0); // 总数量
                    this.$set(this.homeTopList[2], 'value', data.suggestedCount || 0); // 建议数量
                    this.$set(this.homeTopList[3], 'value', data.complaintCount || 0); // 投诉数量

                    // 数字动效
                    this.$nextTick(() => {
                        this.initChart();

                        const refs = this.$refs.myNum;

                        for (const i in refs) {
                            const v = this.homeTopList[i].value;
                            refs[i].reset(0, v); // 启动动效
                            refs[i].start();
                        }
                    })
                }
            })
        },
    },
    mounted() {
        this.getHomeData();
    },
};

绑定动态效果：https://github.com/wangdahoo/vue-animate-number/issues/5

底层：shifty，地址：https://github.com/jeremyckahn/shifty

效果：