vue js 数字动态增加效果

<template>

 <div class="test-wrapper">

     <span>{{count}}</span>

 </div>

</template>

 

<script>

export default {

 name: 'test',

 data() { 

   return {

       count:123,

   }

 },

 mounted() { 

     let vm = this

     window.setInterval(() => {

         vm.addNum(Math.round(Math.random() * 10))

     }, 5000)

 },

 methods:{ 

     addNum(num){

         let vm = this

         let timer = window.setInterval(() => {

            if(num > 0){

                vm.count ++;

                num --;

            }else{

                window.clearInterval(timer)   

            }

        }, 100);

     }

 }

}

</script>

 

<style lang="less" scoped>

 .test-wrapper{

 

 }

</style>