1. 使用v-if 与v-for、v-on完成选项卡案例

在Vue.js中，可以使用`v-if`（条件渲染）、`v-for`（循环渲染）和`v-on`（绑定事件）结合来创建一个简单的选项卡组件。假设我们有一个包含多个选项卡的内容列表，并且每个选项卡都有对应的显示隐藏逻辑。

<template>
  <div class="tab-container">
    <ul class="tabs" v-for="(tab, index) in tabs" :key="index">
      <li @click="activeTab = index">{{ tab.title }}</li>
    </ul>
    <div v-if="activeTab === index" v-for="(item, i) in items[index]" :key="i">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab 1', content: 'Content for Tab 1' },
        { title: 'Tab 2', content: 'Content for Tab 2' },
        // 更多选项卡...
      ],
      activeTab: 0,
    };
  },
  methods: {
    setActive(tabIndex) {
      this.activeTab = tabIndex;
    },
  },
};
</script>

<style>
.tabs li {
  cursor: pointer;
}
.tab-container > div {
  display: none;
}
.tab-container div.active {
  display: block;
}
</style>

在这个例子中：
- `v-for`遍历数据数组`tabs`，生成选项卡列表，并通过`v-if`来控制内容部分的显示与否，只有当`activeTab`等于当前选项卡索引时，该选项卡下的内容才会显示。
- 每个选项卡点击时，会触发`setActive`方法更新`activeTab`值，进而切换内容区域。
- 通过CSS样式管理了默认情况下所有内容都是隐藏的，只有一项处于激活状态（`.active`类名）时显示。