需用 ref 管理点赞状态与数量：liked（布尔值）控制图标切换和禁用，likes（数字）记录总数；点击时通过 toggleLike 同步更新 liked.value 和 likes.value；配合 transition 与动态 class 实现图标淡入淡出动画；displayedLikes + setInterval 实现数字滚动递增效果。
用 ref 管理点赞按钮的动画状态和数字递增，关键在于把「是否已点」和「当前数量」都设为响应式变量，并在状态切换时触发对应逻辑——比如加减数字、控制动画类名、或启动数字滚动效果。
定义两个 ref 变量：状态 + 数量
点赞功能通常需要两个核心状态：
- liked：布尔值，表示用户当前是否已点赞（用于切换图标、颜色、禁用按钮）
- likes：数字，表示总点赞数（用于显示和动画递增）
在 <script setup></script> 中这样写：
import { ref } from 'vue'<br>const liked = ref(false)<br>const likes = ref(0)点击时同步更新状态与数字
点击事件里要同时处理两件事：翻转 liked 状态、按需增减 likes。注意不能直接写 likes++，必须用 .value：
const toggleLike = () => {<br> if (liked.value) {<br> likes.value--<br> } else {<br> likes.value++<br> }<br> liked.value = !liked.value<br>}这样模板中绑定 @click="toggleLike" 就能实时响应。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
配合 transition 实现图标切换动画
Vue 的 liked.value 动态决定：
<transition :name="liked.value ? 'fade-in' : 'fade-out'" mode="out-in"><br><svg v-if="liked.value" key="like" class="icon">...</svg><br><svg v-else key="unlike" class="icon">...</svg><br></transition>
CSS 动画只需定义三组 class：
-
.fade-in-enter-active和.fade-out-leave-active：统一设transition: opacity .2s -
.fade-in-enter和.fade-out-leave-to：设opacity: 0 -
.fade-in-enter-to和.fade-out-leave：设opacity: 1
让数字带滚动动画递增
如果想让 {{ likes }} 不是突变，而是像计数器一样滚动上升，可用一个独立的 ref 存当前显示值，并用 setInterval 逐步逼近目标值：
const displayedLikes = ref(0)<br>const startCounting = (target) => {<br> const start = displayedLikes.value<br> const step = Math.ceil(Math.abs(target - start) / 30)<br> let current = start<br> const timer = setInterval(() => {<br> current += target > start ? step : -step<br> if ((target > start && current >= target) || (target current = target<br> clearInterval(timer)<br> }<br> displayedLikes.value = current<br> }, 16)<br>}<br>// 切换时调用：<br>if (liked.value) {<br> startCounting(likes.value)<br>}模板中显示 {{ displayedLikes }} 即可看到平滑滚动效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
