Vue.js中对数字进行动画处理 - animated-number-vue

Vue.js中对数字进行动画处理 - animated-number-vue
插件名称 animated-number-vue
发布时间 2020年9月9日
插件作者 Leocardoso94

使用anime为Vue2提供的简单vue动画编号  。

安装和下载:

# Yarn
$ yarn add animated-number-vue

# NPM
$ npm install animated-number-vue --save

用法

<template>
  <animated-number
    :value="value"
    :formatValue="formatToPrice"
    :duration="300"
  />
</template>
<script>
import AnimatedNumber from "animated-number-vue";

export default {
  components: {
    AnimatedNumber
  },
  data() {
    return {
      value: 1000
    };
  },
  methods: {
    formatToPrice(value) {
      return `R$ ${value.toFixed(2)}`;
    }
  }
};
</script>