Use countup.js to make digital dynamic overlay (applicable to the display of digital dynamic effects, digital dynamic transformation)

CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create numerical data displayed in a more interesting animation. Although its name is countUp, it can actually change in two directions, which is based on the startVal and endVal parameters you pass. Coupled with the judgment of the wheel event ... 

Configurable parameters:

• target = ID of the target element;

• startVal = start value;

• endVal = end value;

• decimals = decimal places, the default value is 0;

• duration = animation delay in seconds, the default value is 2;

Examples: 

var options = {

  useEasing: true, 
  useGrouping: true, 
  separator: ',', 
  decimal: '.', 
};
var demo = new CountUp('myTargetElement', 0, 4068, 0, 2.5, options);
if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

installation: 

npm i countup.js

Use in 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>