数字滚动【vue-count-to】
效果
背景
在大屏或者其他需要对数字设置千分位的分隔符(比如:151234数字展示成 151,234)或者 数字在变化时进行滚动的变化。
使用
- 安装
npm i vue-count-to
- demo
<template>
<div class="app">
<h1>
当前数值:
<countTo :startVal="startVal" :endVal="endVal" :duration="3000"></countTo>
</h1>
<button @click="updateEndVal">更新endValue</button>
</div>
</template>
<script>
import countTo from "vue-count-to";
export default {
components: {
countTo,
},
data() {
return {
startVal: 0,
endVal: 0,
};
},
methods: {
updateEndVal() {
this.endVal = 100;
},
},
};
</script>
<style lang="less" scoped></style>