nuxtjs实现数字滚动效果

效果如图所示：

vuejs nuxtjs实现数据滚动效果

下载countup.js vue-countup-v2两个插件
 

npm install --save countup.js vue-countup-v2

在需要使用的页面引入使用

<template>
    <div style="padding-top:146rem;">
        <Headers/>
        <div style="background-color: #fff;">
            <div class="MainBox contents">
                <div class="us-left">
                    <div class="us-left-content">
                        <div class="us-left-null"></div>
                        <div class="us-left-school">学校介绍</div>
                        <div class="us-left-e">ABOUT US</div>
                    </div>
                </div>
                <div class="us-right">
                    <div class="content">
                        <div class="tilte">江西省建设职业培训学校</div>
                        <div class="desc"></div>
                        <div class="content">
                            江西省建设职业培训学校创建于2011年，是经江西省人力资源和社会保障厅、江西省民政厅批准成立的具有独立法人资格的民办学校，现有青山湖和新建两个校区。 青山湖校区位于南昌师范学院老校区内（原江西教育学院），租赁两栋楼建筑面积共2356平方；新建校区，即新蓝领培训基地，占地面积约26亩，建筑面积15000多平方，投资5000多万元，可容纳近2000名学员同时学习。学校经过多年建设，各类教学设施设备配套完善，拥有各类多媒体培训教室、多功能培训会议厅、机房和各类实训教室和实操设备等，配备完善的考试监控、屏蔽、网络系统，可全方位满足多媒体理论教学和实操培训和考试（考核、认定）等需求；同时，学校有宿舍，食堂，运动球场，停车位等，能满足学员学习，生活，休闲运动等需求。 我校专注于各职业类技能培训。培训范围有电工、手工木工、起重装卸机械操作
                        </div>
                        <div class="storeContainer">
                            <div class="left">
                                <div class="line"></div>
                                <div class="number">
                                    <span style="font-weight: bold;">
                                        <ICountUp :start="0" :endVal="300" :delay="delay"/>
                                    </span>+
                                </div>
                                <div class="desc">6+年的历史沉淀</div>
                            </div>
                            <div class="left">
                                <div class="line"></div>
                                <div class="number">
                                    <span style="font-weight: bold;">
                                        <ICountUp :start="0" :endVal="1000" :delay="delay"/>
                                    </span>+
                                </div>
                                <div class="desc">10+年丰富教学经验</div>
                            </div>
                            <div class="right">
                                <div class="line"></div>
                                <div class="number">
                                    <span style="font-weight: bold;">
                                        <ICountUp :start="0" :endVal="2000" :delay="delay"/>
                                    </span>+
                                </div>
                                <div class="desc">200+专职教研技术专家</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import ICountUp from 'vue-countup-v2';
export default{
    components:{
        ICountUp
    },
    data(){
        return{
            delay: 10,
        }
    },

}
</script>