Vue.js新手求助：实现按钮Active类切换，如何避免使用querySelector？

你当前用querySelector直接操作DOM的写法，虽然能实现功能，但不符合Vue数据驱动的核心思想，推荐用状态来控制类名和内容显示，代码更简洁、易维护，还不用手动操作DOM。

具体实现步骤： #

• 在组件的data里定义activeTab状态，用来记录当前激活的标签标识，初始值设为第一个按钮的目标值。
• 给每个按钮绑定点击事件，点击时更新activeTab为当前按钮的目标标识。
• 通过v-bind:class动态绑定active类，判断当前按钮的目标标识是否等于activeTab。
• 内容区域用v-show或v-if结合activeTab控制显示，彻底告别手动DOM操作。

完整代码示例： #

<template>
  <div class="menu-tabs">
    <button 
      type="button" 
      class="menu-tab-item"
      :class="{ active: activeTab === '#remis-transfer', 'text-muted': activeTab !== '#remis-transfer' }"
      @click="activeTab = '#remis-transfer'"
    >
      Transfer
    </button>
    <button 
      type="button" 
      class="menu-tab-item"
      :class="{ active: activeTab === '#bank-transfer', 'text-muted': activeTab !== '#bank-transfer' }"
      @click="activeTab = '#bank-transfer'"
    >
      Transfer Money
    </button>
    <button 
      type="button" 
      class="menu-tab-item"
      :class="{ active: activeTab === '#fueling', 'text-muted': activeTab !== '#fueling' }"
      @click="activeTab = '#fueling'"
    >
      Fueling
    </button>

    <!-- 内容区域示例 -->
    <div class="menu-section">
      <div class="menu-tab-content" v-show="activeTab === '#remis-transfer'">
        Transfer 对应内容
      </div>
      <div class="menu-tab-content" v-show="activeTab === '#bank-transfer'">
        Transfer Money 对应内容
      </div>
      <div class="menu-tab-content" v-show="activeTab === '#fueling'">
        Fueling 对应内容
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '#remis-transfer' // 默认激活第一个标签
    }
  }
}
</script>

标签较多时的进一步优化： #

如果按钮数量多，把标签数据放到数组里用v-for循环渲染，避免重复代码：

<template>
  <div class="menu-tabs">
    <button 
      type="button" 
      class="menu-tab-item"
      :class="{ active: activeTab === item.target, 'text-muted': activeTab !== item.target }"
      @click="activeTab = item.target"
      v-for="item in tabList"
      :key="item.target"
    >
      {{ item.label }}
    </button>

    <div class="menu-section">
      <div 
        class="menu-tab-content" 
        v-show="activeTab === item.target"
        v-for="item in tabList"
        :key="item.target"
      >
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '#remis-transfer',
      tabList: [
        { label: 'Transfer', target: '#remis-transfer', content: 'Transfer 对应内容' },
        { label: 'Transfer Money', target: '#bank-transfer', content: 'Transfer Money 对应内容' },
        { label: 'Fueling', target: '#fueling', content: 'Fueling 对应内容' }
      ]
    }
  }
}
</script>

这种写法的优势：

• 完全遵循Vue数据驱动理念，状态变化自动更新视图，不用手动操作DOM。
• 代码更简洁，标签越多，循环渲染的优势越明显。
• 逻辑集中在data里，维护和调试更方便。

内容的提问来源于stack exchange，提问作者fasasi