vue3中，tabs标签页的使用、调用方法实现动态style

在Vue 3中，可以使用组合式API（Composition API）来实现Tabs标签页及其样式的动态调整。以下是一个简单的示例：

<template>
  <div>
    <div class="tabs">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        :class="{ 'active': activeTab === tab }"
        @click="activeTab = tab"
      >
        {{ tab }}
      </div>
    </div>
    <div v-for="(tab, index) in tabs" :key="index" v-show="activeTab === tab">
      Content for {{ tab }}
    </div>
  </div>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    const tabs = ref(['Tab 1', 'Tab 2', 'Tab 3']);
    const activeTab = ref(tabs.value[0]);
 
    return {
      tabs,
      activeTab
    };
  }
};
</script>
 
<style scoped>
.tabs div {
  cursor: pointer;
  padding: 5px;
  margin-right: 5px;
  background-color: #f0f0f0;
}
 
.tabs div.active {
  background-color: #white;
  border-bottom: 2px solid #333;
}
</style>

在这个例子中，我们定义了一个包含三个标签的数组tabs，并用activeTab来记录当前激活的标签。通过点击事件@click来更新activeTab的值，从而显示对应的内容。CSS样式是动态应用的，当标签被激活时，它的样式会发生变化。