Vueの数値はアニメーションを増やすために0から増えていき、小数点以下の桁数を計算したり、jsの小数点以下の乗算をしたりすると、小数点以下がたくさんあります。

1. 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>

2. 数値の小数点以下の桁数を決定します。

    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

3. 小数の掛け算を行った後に桁数が多い問題を解く

//第一个参为要乘的数字，第二个参是乘以几
    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