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. 点击取反状态值即可完成切换，简单高效