Animated Number Transition For Vue.js - v-number

Install & Download:

# Yarn
$ yarn add @maxflex/v-number
# NPM
$ npm install @maxflex/v-number --save

Description:

v-number is a Vue.js component to apply a smooth vertical number transition effect to counter.

How to use it:

1. Install and import the v-number component.

import { VNumber } from "@maxflex/v-number";

2. Insert the v-number component into your app template.

<v-number v-model="someNumber"></v-number>

3. Register the component and create a basic like counter.

export default {
  components: {
    VNumber
  },
  data() {
    return {
      number: 1,
      likes: 153,
      isLiked: false,
      intervalSpeed: 2000,
      interval: null
    };
  },
  created() {
    this.startInterval();
  },
  methods: {
    startInterval() {
      this.interval = setInterval(() => this.number++, this.intervalSpeed);
    },
    clearInterval() {
      clearInterval(this.interval);
    },
    like() {
      this.likes += 1;
    }
  }
};