Vue:countup.js实现数字增长动画
文档:countUp.js: https://github.com/inorganik/countUp.jsvue-countup-v2: https://github.com/xlsdg/vue-countup-v2安装$ npm install --save countup.js vue-countup-v2代码示例<template><div class="iCountUp
·
文档:
countUp.js: https://github.com/inorganik/countUp.js
vue-countup-v2: https://github.com/xlsdg/vue-countup-v2
安装
$ npm install --save countup.js vue-countup-v2
代码示例
<template>
<div class="iCountUp">
<CountUp
:delay="delay"
:endVal="endVal"
:options="options"
/>
</div>
</template>
<script>
import CountUp from 'vue-countup-v2';
export default {
name: 'demo',
components: {
CountUp,
},
data() {
return {
delay: 1000,
endVal: 120500,
options: {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '$',
suffix: '',
},
};
},
};
</script>
<style scoped>
.iCountUp {
font-size: 12em;
margin: 0;
color: #4d63bc;
}
</style>
更多推荐
已为社区贡献51条内容
所有评论(0)