【实战】常见动画效果 in Vue

[sleepyShen1989]

数字递增

<template>
    <div>
        <input type="number" step="100" v-model="number">
        <div>当前数字为：{{ showNumber.number.toFixed(0) }}</div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import gsap from 'gsap'

const number = ref('0')
const showNumber = reactive({
    number: 0
})

watch(number, (n)=>{
    gsap.to(showNumber, { duration: 0.5, number: Number(n) })
})

</script>