给我用vue3写一个选项卡
时间: 2023-05-27 15:03:34 浏览: 86
以下是使用Vue3编写简单的选项卡示例:
```
<template>
<div class="tabs">
<div class="tab-buttons">
<button v-for="(tab, index) in tabs"
:key="index"
:class="{ active: activeTab === index }"
@click="activeTab = index">
{{ tab.name }}
</button>
</div>
<div class="tab-content">
<div v-for="(tab, index) in tabs"
:key="index"
v-show="activeTab === index">
{{ tab.content }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 0,
tabs: [
{
name: 'Tab 1',
content: 'This is the first tab'
},
{
name: 'Tab 2',
content: 'This is the second tab'
},
{
name: 'Tab 3',
content: 'This is the third tab'
}
]
}
}
}
</script>
<style>
.tabs {
border: 1px solid #ccc;
margin: 10px;
}
.tab-buttons {
display: flex;
}
.tab-buttons button {
border: none;
background-color: transparent;
padding: 10px;
cursor: pointer;
}
.tab-buttons button.active {
background-color: #ccc;
}
.tab-content div {
padding: 10px;
}
</style>
```
这个示例包括两个主要部分:选项卡按钮和选项卡内容。通过在每个按钮上设置Click事件将相应的选项卡显示出来,在选项卡上使用v-show指令使其在当前选项卡处于活动状态时显示。
这个示例只是高度常见的选项卡的一个简单示例,您可能需要根据您的具体需求进行更改和调整。