vue一对多选项卡代码
时间: 2023-10-29 09:04:20 浏览: 34
以下是一个简单的示例,展示如何在 Vue 中实现一对多选项卡:
```html
<template>
<div class="tabs">
<div class="tab-buttons">
<button v-for="(tab, index) in tabs" :key="index" @click="activeTab = index">{{ tab.title }}</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: [
{
title: "Tab 1",
content: "This is the content for Tab 1",
},
{
title: "Tab 2",
content: "This is the content for Tab 2",
},
{
title: "Tab 3",
content: "This is the content for Tab 3",
},
],
};
},
};
</script>
<style>
.tabs {
display: flex;
flex-direction: column;
width: 100%;
}
.tab-buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.tab-buttons button {
background-color: #f2f2f2;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
.tab-buttons button:hover {
background-color: #d9d9d9;
}
.tab-buttons button.active {
background-color: #e6e6e6;
}
.tab-content {
border: 1px solid #ccc;
padding: 20px;
}
</style>
```
在这个示例中,我们使用了一个 `tabs` 数组来存储选项卡的标题和内容。`activeTab` 变量用于跟踪当前选项卡的索引。
`v-for` 指令用于循环输出选项卡的按钮和内容。按钮上绑定了 `click` 事件,当用户点击按钮时,会将 `activeTab` 的值更新为当前选项卡的索引。内容部分使用了 `v-show` 指令来控制显示/隐藏。
CSS 部分使用了 flex 布局来对选项卡进行布局,并添加了一些基本的样式来美化选项卡。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)