数字滚动模板

<template>
    {{ d.num.toFixed(0) }}
</template>
<script setup>
import { reactive,watch } from "vue"
import gsap from "gsap"
const props = defineProps({
    value:{
        type:Number,
        default:0
    }
})
const d = reactive({
    num:0
})
// 动画
function AnmateToValue(){
    gsap.to(d,{
        duration:1,
        num:props.value
    })
}
AnmateToValue()
// 监听prop.value的值是否有变化，有变化就执行AnmateToValue()方法
watch(()=>props.value,()=>AnmateToValue())

</script>

使用：（从0滚动到1000）

                            <CountTo :value="1000"/>