Vue中v-for结合范围与三元类切换样式失效问题求解

核心问题：showTab 定义错误 #

你在data里把showTab写成了对象格式（这是组件props的写法），但Vue实例的data中应该直接赋值初始值，导致n-1 === showTab的比较永远不成立，样式切换失效。

修复步骤及优化代码 #

1. 修正showTab的定义，直接设为数字类型的初始值0
2. 优化v-for写法：直接遍历tabs数组并获取索引，避免n-1的冗余计算

修复后的完整代码示例：

<template>
  <div class="tabs-container-block">
    <!-- 直接遍历tabs数组，获取索引index -->
    <div 
      v-for="(tab, index) in tabs" 
      :key="index"
      :class="index === showTab ? 'tab-title active-title' : 'tab-title'"
    >
      {{ tab.TabTitle }}
    </div>   
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 直接赋值初始值，无需type和default
      showTab: 0,
      // 示例tabs数据结构
      tabs: [
        { TabTitle: '标签1' },
        { TabTitle: '标签2' },
        { TabTitle: '标签3' }
      ]
    }
  }
}
</script>

额外说明 #

• 必须给v-for绑定:key，这是Vue的性能优化要求，避免渲染异常
• 如果需要点击切换标签，只需在元素上添加点击事件修改showTab的值：

<div 
  v-for="(tab, index) in tabs" 
  :key="index"
  :class="index === showTab ? 'tab-title active-title' : 'tab-title'"
  @click="showTab = index"
>
  {{ tab.TabTitle }}
</div>

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