用 ref 管理选项卡切换的核心是声明响应式索引变量 const activeIndex = ref(0)，点击时通过 activeIndex.value = index 更新，并配合 :class 或 v-if 控制样式与内容显隐；多维数据可结合 reactive 管理 tabs 列表。

用 ref 管理选项卡切换的当前激活索引，核心是创建一个响应式数字变量，并在点击时更新它，同时配合模板条件渲染或类绑定来控制视觉状态和内容显示。

用 ref 声明当前激活索引

在 setup 中使用 ref 创建一个初始值为 0 的响应式索引变量。它适合基本类型，修改后能自动触发视图更新：

• const activeIndex = ref(0) —— 初始化第一个 Tab 为激活态
• 不需要 reactive，因为只是单个数字，ref 更简洁直接
• 模板中直接写 {{ activeIndex }}，Vue 自动解包；脚本里修改必须用 activeIndex.value = 1

绑定 Tab 标签的激活样式

遍历 tab 列表，用 v-for 渲染每个标签，并通过动态 class 判断是否高亮：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 给每个 或
  加上 :class="{ 'active': index === activeIndex.value }"
• 或者用内联样式：:style="{ opacity: index === activeIndex.value ? 1 : 0.6 }"
• 注意：比较时用 activeIndex.value，不能漏掉 .value

切换时更新 ref 值并联动内容

每个 Tab 标签绑定 @click，传入目标索引，直接赋值更新：

• @click="activeIndex.value = index" —— 简洁可靠，无需额外函数
• 对应的内容区域可用 v-if 或 v-show 控制显隐：v-if="activeIndex.value === 0"
• 若内容较重，推荐用 v-show 避免重复挂载；若需保持内部状态，可配合

进阶：配合 reactive 管理多维 Tab 数据

当 Tab 标题、内容、图标等需要统一管理时，可用 reactive 存储列表，ref 仍只管索引：

• const tabs = reactive([{ title: '用户', content: '...' }, { title: '设置', content: '...' }])
• const activeIndex = ref(0) 单独控制选中项
• 模板中用 tabs[activeIndex.value].content 渲染当前内容，结构清晰且响应式有效