vue tab实现例子
Vue Tab 实现示例
以下是一个基于 Vue.js 的标签页（Tab）组件的实现示例，包含动态切换和基础样式。
基础模板结构
<template>
<div class="tabs">
<div class="tab-header">
<button
v-for="(tab, index) in tabs"
:key="index"
@click="activeTab = index"
:class="{ 'active': 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: 'Content for Tab 1' },
{ title: 'Tab 2', content: 'Content for Tab 2' },
{ title: 'Tab 3', content: 'Content for Tab 3' }
]
};
}
};
</script>样式部分
<style scoped>
.tabs {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
}
.tab-header {
display: flex;
border-bottom: 1px solid #ddd;
}
.tab-header button {
padding: 10px 20px;
background: none;
border: none;
cursor: pointer;
font-size: 16px;
}
.tab-header button.active {
border-bottom: 2px solid #42b983;
color: #42b983;
}
.tab-content {
padding: 20px;
min-height: 100px;
}
</style>动态组件实现
如果需要更复杂的动态内容，可以使用 Vue 的动态组件：
<template>
<div class="tabs">
<div class="tab-header">
<button
v-for="(tab, index) in tabs"
:key="index"
@click="activeTab = tab.component"
:class="{ 'active': activeTab === tab.component }"
>
{{ tab.title }}
</button>
</div>
<div class="tab-content">
<component :is="activeTab" />
</div>
</div>
</template>
<script>
import Tab1Content from './Tab1Content.vue';
import Tab2Content from './Tab2Content.vue';
export default {
components: {
Tab1Content,
Tab2Content
},
data() {
return {
activeTab: 'Tab1Content',
tabs: [
{ title: 'Tab 1', component: 'Tab1Content' },
{ title: 'Tab 2', component: 'Tab2Content' }
]
};
}
};
</script>使用第三方库
对于更复杂的需求，可以考虑使用现成的 Vue Tab 组件库：
