countup.js实现数字动态叠加效果

var options = {

"htmlcode">

npm i countup.js


在vue中使用：


<template>
 <h1><span
 ref='countup'
 class="text"
 ></span>
 </h1>
</template>

<script>
import { CountUp } from 'countup.js'
export default {
 name: 'Countup',
 data () {
 return {
 options: {
 startVal: 1000
 },
 endCount: 2019
 }
 },
 mounted () {
 this.initCountUp()
 },
 methods: {
 initCountUp () {
 let demo = new CountUp(this.$refs.countup, this.endCount, this.options)
 if (!demo.error) {
 demo.start()
 } else {
 console.error(demo.error)
 }
 }
 }
}
</script>

<style lang="less" scoped>
.text {
 color: #4d63bc;
 font-size: 16px;
}
</style>


演示地址：countUp.js
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。