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