vue tabs标签页怎么写
时间: 2023-09-22 13:07:43 浏览: 48
Vue中实现Tabs标签页可以通过以下步骤:
1. 在Vue组件中定义一个data属性,用于保存Tabs的数据,如选中的标签、标签内容等。
```
data () {
return {
activeTab: 0,
tabs: [
{ label: 'Tab 1', content: 'Content of Tab 1' },
{ label: 'Tab 2', content: 'Content of Tab 2' },
{ label: 'Tab 3', content: 'Content of Tab 3' },
]
}
}
```
2. 在模板中使用v-for指令,遍历tabs数组,生成标签并绑定事件。
```
<ul class="tabs">
<li v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="activeTab = index">
{{ tab.label }}
</li>
</ul>
```
3. 在模板中使用v-show指令,根据选中的标签,显示对应的标签内容。
```
<div class="tab-content" v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
{{ tab.content }}
</div>
```
最终的代码如下:
```
<template>
<div class="tabs-container">
<ul class="tabs">
<li v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTab === index }" @click="activeTab = index">
{{ tab.label }}
</li>
</ul>
<div class="tab-content" v-for="(tab, index) in tabs" :key="index" v-show="activeTab === index">
{{ tab.content }}
</div>
</div>
</template>
<script>
export default {
data () {
return {
activeTab: 0,
tabs: [
{ label: 'Tab 1', content: 'Content of Tab 1' },
{ label: 'Tab 2', content: 'Content of Tab 2' },
{ label: 'Tab 3', content: 'Content of Tab 3' },
]
}
}
}
</script>
<style>
.tabs-container {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}
.tabs {
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.tabs li {
flex-grow: 1;
text-align: center;
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #ccc;
}
.tabs li.active {
background-color: #fff;
border-bottom: none;
}
.tab-content {
padding: 20px;
}
</style>
```