<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"/>