轻量级数字动画插件CountUp.js。vue中使用

在Vue中使用CountUp.js创建数字动画，首先需要安装CountUp.js库：

npm install countup.js --save

然后在Vue组件中引入并使用：

<template>
  <div>
    <span ref="countUpElement"></span>
  </div>
</template>
 
<script>
import CountUp from 'countup.js';
 
export default {
  mounted() {
    const options = {
      useEasing: true,
      useGrouping: true,
      separator: ',',
      decimal: '.',
    };
    const countUp = new CountUp(this.$refs.countUpElement, 1234567, options);
    if (!countUp.error) {
      countUp.start();
    } else {
      console.error(countUp.error);
    }
  }
};
</script>

在这个例子中，我们创建了一个Vue组件，在mounted生命周期钩子中初始化了CountUp实例，并将动画应用于模板中的<span>元素。CountUp构造函数的第一个参数是DOM元素，第二个参数是目标数字，第三个参数是配置选项。动画在start方法调用后开始。