文章目录
- 一、效果:
- 二、使用:
- 【1】安装插件
- 【2】案例
- 三、Options
- 四、Functions
一、效果:

二、使用:
官方文档:
github地址——https://github.com/PanJiaChen/vue-countTo
npm地址——https://www.npmjs.com/package/vue-count-to
【1】安装插件
npm install vue-count-to
【2】案例
<template>
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo },
data () {
return {
startVal: 0,
endVal: 2017
}
}
}
</script>
三、Options
| Property | Description | type | default |
|---|---|---|---|
| startVal | 开始值 | Number | 0 |
| endVal | 结束值 | Number | 2017 |
| duration | 持续时间,以毫秒为单位 | Number | 3000 |
| autoplay | 自动播放 | Boolean | true |
| decimals | 要显示的小数位数 | Number | 0 |
| decimal | 十进制分割 | String | . |
| separator | 分隔符 | String | , |
| prefix | 前缀 | String | ‘’ |
| suffix | 后缀 | String | ‘’ |
| useEasing | 使用缓和功能 | Boolean | true |
| easingFn | 缓和回调 | Function | — |
四、Functions
| Function Name | Description |
|---|---|
| mountedCallback | 挂载以后返回回调 |
| start | 开始计数 |
| pause | 暂停计数 |
| reset | 重置countTo |







![[附源码]计算机毕业设计基于Springboot的花店售卖系统的设计与实现](https://img-blog.csdnimg.cn/46497551be8340b282051e63d84bbb16.png)



![[附源码]Python计算机毕业设计Django软考刷题小程序](https://img-blog.csdnimg.cn/37d139903fd34f7f87063313d8f1adf2.png)




![[附源码]计算机毕业设计基于SpringBoot的小说阅读系统](https://img-blog.csdnimg.cn/1ef39d2704e845ea970a23feba7a23e0.png)


