Vue3 按钮切换示例（启动 / 关闭互斥显示）

Vue3 按钮切换示例启动/关闭互斥显示我给你写一个最简、可直接运行的 Vue3 示例只有启动和关闭两个按钮永远只显示其中一个点击切换状态用 Vue3 组合式 APIscript setup完整代码template !-- 按钮容器 -- div classbtn-box !-- 启动按钮只有 isClosed 为 true 时显示 -- button v-ifisClosed clickswitchStatus classstart-btn 启动 /button !-- 关闭按钮只有 isClosed 为 false 时显示 -- button v-else clickswitchStatus classstop-btn 关闭 /button /div /template script setup import { ref } from vue // 状态true 显示启动按钮 | false 显示关闭按钮 const isClosed ref(true) // 切换状态函数 const switchStatus () { isClosed.value !isClosed.value } /script style scoped .btn-box { margin: 20px; } .start-btn { padding: 8px 16px; background: #409eff; color: white; border: none; border-radius: 4px; cursor: pointer; } .stop-btn { padding: 8px 16px; background: #f56c6c; color: white; border: none; border-radius: 4px; cursor: pointer; } /style核心逻辑说明状态控制用isClosed响应式变量控制显示哪个按钮初始值true→ 默认显示启动按钮互斥显示v-ifisClosed→ 为 true 显示启动v-else→ 显示关闭两个按钮永远只出现一个点击切换点击任意按钮触发switchStatus()执行isClosed.value !isClosed.value取反状态视图自动更新效果页面刚打开显示蓝色启动按钮点击启动按钮按钮变成红色关闭按钮点击关闭按钮变回蓝色启动按钮总结用一个ref变量控制按钮显示隐藏v-if/v-else实现按钮互斥展示点击取反状态值即可完成切换简单高效