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

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

插件名称:animated-number-vue

发布时间:2020年9月9日

插件作者:Leocardoso94

官网 演示 GitHub下载

使用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>
相关插件