使用v-if/v-on/v-for完成“选项卡”案例

在Vue.js中，你可以使用模板语言`v-if`, `v-on`(处理事件), 和指令`v-for` 来实现一个简单的选项卡功能。以下是一个基本的示例：

首先，我们假设有一个数组`tabs`，包含了各个选项卡的内容和标题：

<script setup>
import { ref } from "vue";

const tabs = ref([
  { title: "Tab 1", content: "This is the content for tab 1." },
  { title: "Tab 2", content: "This is the content for tab 2." },
  { title: "Tab 3", content: "This is the content for tab 3." }
]);
</script>

<div id="app">
  <button v-for="(tab, index) in tabs" @click="activeTab(index)">
    {{ tab.title }}
  </button>

  <template v-if="activeIndex === 0">
    <p>{{ tabs[activeIndex].content }}</p>
  </template>
  <template v-else-if="activeIndex === 1">
    <!-- Second tab content -->
    <p>{{ tabs[activeIndex].content }}</p>
  </template>
  <template v-else>
    <!-- Third tab content -->
    <p>{{ tabs[activeIndex].content }}</p>
  </template>
</div>

然后，在`setup`里，我们定义了一个ref `activeIndex`来跟踪当前激活的选项卡索引，初始值设为0：

const activeIndex = ref(0);

// 当点击按钮时，切换选项卡
function activeTab(index) {
  activeIndex.value = index;
}

这样，当用户点击不同的按钮时，对应的`v-if`、`v-else-if`和`v-else`区域会被渲染展示相应的选项卡内容。