vue工程展示数字动画组件vue animate-number的使用与填坑

目录

vue工程数字动画组件vue animate-number的使用与填坑

一、基本用法篇

（一）、环境配置

（二）、核心代码：

（三）、API​

二、填坑篇

1、用数组v-for动态传值渲染时候不显示值，显示NAN

2、提示找不到找不到start()方法。

3、特殊利用formatter方法，定制需要显示的数字样式

---

vue工程数字动画组件vue animate-number的使用与填坑

一、基本用法篇

（一）、环境配置

1.终端执行：

npm install vue-animate-number 

2.在main.js中：

import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)

（二）、核心代码：

1.页面：

<template>
  <div>
    <animate-number
      from="1" 
      to="10" 
      duration="1000" 
      easing="easeOutQuad"
      :formatter="formatter"
    ></animate-number>

    <!-- parseInt as default formatter -->
    <animate-number from="1" to="10"></animate-number>

    <!-- manually start animation by click -->
    <animate-number ref="myNum" from="0" to="10"