vue2中 vue-count-to组件让数字从某个数字动态的显示到某个数字(后附vue3的用法)
1、首先安装
npm install vue-count-to
2、使用
- 2.1、先导入组件 import countTo from ‘vue-count-to’
- 2.2、注册组件
components: {
countTo
}, - 2.3、使用组件 <countTo>
<template>
<div class="home">
<countTo class="count-to" :startVal='0' :endVal='100' :duration='3000'></countTo>
</div>
</template>
<script>
// @ is an alias to /src
import countTo from 'vue-count-to'
export default {
name: 'HomeView',
components: {
countTo
},
data () {
return {
startVal: 0,
endVal: 2017
}
}
}
</script>
<style scoped lang="less">
.count-to{
color: gray;
font-size: 20px;
}
</style>
结果如下会持续3秒逐渐过渡到100:
vue3中使用
1、先安装:npm install vue3-count-to --save
npm install vue3-count-to --save
2、使用
- 2.1、先导入组件 import { CountTo } from ‘vue3-count-to’;
- 2.2、直接使用组件 <count-to :startVal=‘0’ :endVal=‘100’ :duration=‘3000’>
<script setup>
import { CountTo } from 'vue3-count-to';
</script>
<template>
<div class="container">
<count-to :startVal='0' :endVal='100' :duration='3000'></count-to>
</div>
</template>
<style scoped lang='scss'>
.container{
display: flex;
align-items: center;
justify-content: center;
}
</style>
3、显示结果:
原文地址:https://blog.csdn.net/jjw_zyfx/article/details/142746534
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!