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

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

我给你写一个最简、可直接运行的 Vue3 示例：

• 只有启动和关闭两个按钮
• 永远只显示其中一个
• 点击切换状态
• 用 Vue3 组合式 API（<script setup>）

完整代码

<template> <!-- 按钮容器 --> <div class="btn-box"> <!-- 启动按钮：只有 isClosed 为 true 时显示 --> <button v-if="isClosed" @click="switchStatus" class="start-btn" > 启动 </button> <!-- 关闭按钮：只有 isClosed 为 false 时显示 --> <button v-else @click="switchStatus" class="stop-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>

核心逻辑说明

1. 状态控制

   • 用isClosed响应式变量控制显示哪个按钮
   • 初始值true→ 默认显示启动按钮

2. 互斥显示

   • v-if="isClosed"→ 为 true 显示启动
   • v-else→ 显示关闭
   • 两个按钮永远只出现一个

3. 点击切换

   • 点击任意按钮触发switchStatus()
   • 执行isClosed.value = !isClosed.value取反状态
   • 视图自动更新

效果

• 页面刚打开：显示蓝色启动按钮
• 点击启动按钮：按钮变成红色关闭按钮
• 点击关闭按钮：变回蓝色启动按钮

总结

1. 用一个ref变量控制按钮显示隐藏
2. v-if/v-else实现按钮互斥展示
3. 点击取反状态值即可完成切换，简单高效