使用Vue中的v-if 与v-for、v-on完成一个简易的选项卡案例

在Vue.js中，可以使用`v-if`条件渲染和`v-for`循环以及`v-on`绑定事件来创建一个简单的选项卡功能。这里是一个基本的示例：

<template>
  <div id="tabs">
    <!-- 每个选项卡都是一个li元素 -->
    <ul>
      <li v-for="(tab, index) in tabs" :key="index">
        <button @click="activeTab = index">{{ tab.title }}</button>
        <div v-if="activeTab === index" class="tabpanel">
          {{ tab.content }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab 1', content: '这是第一个选项卡的内容' },
        { title: 'Tab 2', content: '这是第二个选项卡的内容' },
        { title: 'Tab 3', content: '这是第三个选项卡的内容' }
      ],
      activeTab: 0 // 初始激活的第一个选项卡
    };
  },
  methods: {
    setActiveTab(index) {
      this.activeTab = index;
    }
  }
};
</script>

<style scoped>
.tabpane {
  display: none;
}

.tabpane.active {
  display: block;
}
</style>

在这个例子中：
- `v-for`遍历数组`tabs`，为每个选项卡创建一个按钮并绑定`@click`事件，点击按钮时切换相应的`activeTab`值。
- `v-if`用于根据当前选中的`activeTab`值来显示对应的选项卡内容，只有当`index`等于`activeTab`时，其内容区域`.tabpanel`才会显示出来。
- `data`属性`activeTab`表示当前激活的选项卡，初始值为0。