asp网站开发框架,深圳公交公司官网,wordpress插件装多了卡,wordpress 模拟word介绍 vue-countup-v3 插件是一个基于 Vue3 的数字动画插件#xff0c;用于在网站或应用程序中创建带有数字动画效果的计数器。通过该插件#xff0c;我们可以轻松地实现数字的递增或递减动画#xff0c;并自定义其样式和动画效果。该插件可以用于许多场景#xff0c;例如展…介绍 vue-countup-v3 插件是一个基于 Vue3 的数字动画插件用于在网站或应用程序中创建带有数字动画效果的计数器。通过该插件我们可以轻松地实现数字的递增或递减动画并自定义其样式和动画效果。该插件可以用于许多场景例如展示网站页面的访问量展示应用程序的下载量以及展示任何需要动态展示数字的场景等。 安装命令
npm i vue-countup-v3
代码实现 简便版
script setup langts
import CountUp from vue-countup-v3
/scripttemplatecount-up :end-val3000/count-up
/template 豪华版-单个
templatediv classbodydiv classboxcount-up :end-valendVal :durationduration:decimal-placesdecimals :optionsoptions initonInit finishedonFinishedclasscount/count-up/div/div
/templatescript setup langts
import { reactive, toRefs, onMounted,ref } from vue
import CountUp from vue-countup-v3
import type { ICountUp, CountUpOptions } from vue-countup-v3import zhuxing from /components/gundong/zhuxing.vueconst data reactive({startVal: 0, // 开始值endVal: 10000, // 结束值 -- 可以写成动态的duration: 5, // 跳动时长 - 单位秒decimals: 0, // 小数点位数countUp: undefined as ICountUp | undefined, // 跳动的对象options: {// 配置分隔符separator: ❤️} as CountUpOptions
})const onInit (ctx: ICountUp) {data.countUp ctxconsole.log(开始, ctx)
}
const onFinished () {console.log(结束)
}
const { endVal, duration, decimals, options } toRefs(data)onMounted(() {// onInit()// onFinished()
})
/scriptstyle langless scoped
.body {.box {display: flex;justify-content: flex-start;.count {font-size: 20px;font-weight: bold;margin: 0 30px;}}
}
/style
豪华版-多个
templatediv classbodydiv classboxcount-up v-for(val, index) in endVal :keyindex :end-valval :durationduration:decimal-placesdecimals :optionsoptions initonInit finishedonFinishedclasscount/count-up/div/div
/templatescript setup langts
import { reactive, toRefs, onMounted,ref } from vue
import CountUp from vue-countup-v3
import type { ICountUp, CountUpOptions } from vue-countup-v3const data reactive({startVal: 0, // 开始值endVal: [3000, 5000, 10000], // 结束值 -- 可以写成动态的duration: 3, // 跳动时长 - 单位秒decimals: 0, // 小数点位数countUps: [] as ArrayICountUp | [], // 跳动的对象数组options: {// 配置分隔符separator: ❤️} as CountUpOptions
})const onInit (ctx: ICountUp) {data.countUp ctxconsole.log(开始, ctx)
}
const onFinished () {console.log(结束)
}
const { endVal, duration, decimals, options } toRefs(data)onMounted(() {// onInit()// onFinished()
})
/scriptstyle langless scoped
.body {.box {display: flex;justify-content: flex-start;.count {font-size: 20px;font-weight: bold;margin: 0 30px;}}
}
/style
效果展示
