vue实现选项卡切换

示例代码如下

```html
<template>
  <div>
    <div class="tabs">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ active: activeTab === index }"
        @click="changeTab(index)"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="content">
      <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const tabs = ref([
      { title: 'Tab 1', content: 'Content 1' },
      { title: 'Tab 2', content: 'Content 2' },
      { title: 'Tab 3', content: 'Content 3' },
    ]);

    const activeTab = ref(0);

    const changeTab = (index) => {
      activeTab.value = index;
    };

    return {
      tabs,
      activeTab,
      changeTab,
    };
  },
};
</script>

<style>
.tabs {
  display: flex;
}

.tabs div {
  padding: 10px;
  cursor: pointer;
}

.tabs div.active {
  font-weight: bold;
}

.content div {
  display: none;
}

.content div.show {
  display: block;
}
</style>

并且代码实现了切换选项卡选项卡样式会改变的功能
通过css实现

# 现存问题
我使用了svg丰富选项卡的样式，但是并不能修改svg颜色的方法

# 建议
使用子组件进行子页面的渲染，这样会提高页面的可维护性