Nuxt中点击按钮切换显示不同文本的实现问题求助

原代码存在的问题 #

• Script语法错误：
  • 组件结构混乱，return不能直接写在export default根层级，必须放在data()函数内部返回数据对象
  • data()函数缺少return语句，变量定义用了=而非Vue要求的:
  • ZZ数组的第二个与第三个对象之间缺少逗号，语法不合法
  • hub_des_1的文本值未加引号，属于语法错误
  • show_1/show_2/show_3的定义位置错误，且未和内容数据建立关联
• Template逻辑错误：
  • v-for循环ZZ会生成3组按钮+文本块，和“一组按钮切换内容”的需求不符
  • v-if="{id: i.id}"写法无效，这是个始终为真的对象，起不到条件渲染作用
  • 点击事件的逻辑是切换单个布尔值，但未实现互斥显示（点击BB时应该关闭AA的内容），且ZZ数组的对象里根本没有show_1这类属性

正确实现代码 #

Template部分 #

<template>
  <div>
    <!-- 按钮组，点击切换当前选中标签 -->
    <button @click="currentTab = 'AA'" :class="{ active: currentTab === 'AA' }">AA</button>
    <button @click="currentTab = 'BB'" :class="{ active: currentTab === 'BB' }">BB</button>
    <button @click="currentTab = 'CC'" :class="{ active: currentTab === 'CC' }">CC</button>

    <!-- 根据选中标签显示对应文本 -->
    <p>shown in here! {{ tabContents[currentTab] }}</p>
  </div>
</template>

Script部分（Nuxt 2写法） #

<script>
export default {
  data() {
    return {
      // 默认选中AA
      currentTab: 'AA',
      // 存储各按钮对应的文本内容
      tabContents: {
        AA: 'show this1',
        BB: 'show this2',
        CC: 'show this3'
      }
    }
  }
}
</script>

可选：选中按钮样式优化 #

<style scoped>
.active {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
}
button {
  margin-right: 8px;
  padding: 4px 8px;
}
</style>

逻辑说明 #

1. 用currentTab变量记录当前选中的按钮，默认值设为'AA'实现默认选中效果
2. 点击按钮时修改currentTab的值，天然实现互斥切换
3. 直接通过tabContents[currentTab]获取对应文本，无需复杂的条件判断
4. 可选的active类用来标记当前选中的按钮，提升视觉反馈

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