如何通过点击按钮为区块添加class、隐藏另一区块并替换按钮文本？

你可以通过Vue 3的响应式状态实现需求，核心是用一个布尔变量跟踪切换状态，再绑定到元素的类名、显示状态和按钮文本上。以下是完整实现代码：

完整代码 #

CSS（保留原有样式） #

.box-table {
  display: none;
}

.box-table.active {
   display: block;
}

HTML（添加Vue绑定） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>

<div id=app>
  <div class="wrap">
        <div class="wrap-box">
            <div class="box-img" v-show="!isActive">btn-click-hide</div>
            <div class="box-table" :class="{ active: isActive }">btn-click-show add class active</div>
        </div>
        <button class="btn" @click="toggle">{{ isActive ? '隐藏表格' : '显示表格' }}</button>
    </div>
</div>

JavaScript（Vue实例逻辑） #

const { createApp, ref } = Vue;

createApp({
  setup() {
    // 响应式变量，跟踪当前激活状态
    const isActive = ref(false);
    
    // 切换状态的方法
    const toggle = () => {
      isActive.value = !isActive.value;
    };
    
    return {
      isActive,
      toggle
    };
  }
}).mount('#app');

关键实现点 #

• 响应式状态：用ref创建isActive变量，它的变化会自动触发Vue视图更新
• 类名绑定：通过:class="{ active: isActive }"，当isActive为true时，自动给box-table添加active类
• 元素显示隐藏：给box-img添加v-show="!isActive"，当isActive为true时，该元素会被隐藏（v-show通过修改display属性控制显示）
• 按钮交互：按钮绑定@click="toggle"点击事件触发状态切换；按钮文本用三元表达式实现动态切换

内容的提问来源于stack exchange，提问作者Дмитрий Моисеев