vue数字从0增长递增动画、计算小数点位数及js小数乘法后出现很多位小数的问题

一、vue实现数字递增动画效果

vue项目想要实现数字从0开始增长，可以使用数字滚动插件—vue-count-to

安装

npm install vue-count-to

示例：页面使用

<template>
  <countTo 
  	:startVal='startVal' //初始值
  	:endVal='endVal' //最终值
  	:duration='3000' //时长
  	:decimals="2" //这个是显示代表几位小数
  ></countTo>
</template>
 
<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 1000,
        endVal: 2017
      }
    }
  }
</script>

二、判断该数字有几位小数

    calcXiaoshu (num) {
      console.log(num)
      if (String(num).indexOf('.') == '-1') {
        return 0
      } else {
        var x = String(num).indexOf('.') + 1 //小数点的位置
        var y = String(num).length - x //小数的位数
        console.log(y)
        return y
      }
    },
    console.log(this.calcXiaoshu(1.23))//2

三、解决小数执行乘法之后出现很多位的问题

//第一个参为要乘的数字，第二个参是乘以几
    mul (num1, num2) {
      if (
        parseFloat(num1).toString() == 'NaN' ||
        parseFloat(num2).toString() == 'NaN'
      )
        return
      var m = 0,
        s1 = num1.toString(),
        s2 = num2.toString()
      try {
        m += s1.split('.')[1].length
      } catch (e) {
        console.log(e)
      }
      try {
        m += s2.split('.')[1].length
      } catch (e) {
        console.log(e)
      }
      return (
        (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) /
        Math.pow(10, m)
      )
    }
    console.log(12.34,100) //1234