用VUE写TAB栏切换（简单版）

最新推荐文章于 2024-08-02 11:00:31 发布

你好摸鱼

最新推荐文章于 2024-08-02 11:00:31 发布

阅读量362

点赞数 8

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_66296057/article/details/140491122

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<template>
<div>
<div class="tabs">
<div
v-for="(tab, index) in tabs"
:key="index"
class="tab"
:class="{'active': activeIndex === index}"
@click="activeIndex = index"
>
{{ tab }}
</div>
</div>
<div class="tab-content">
<div v-if="activeIndex === 0">
内容A
</div>
<div v-if="activeIndex === 1">
内容B
</div>
<div v-if="activeIndex === 2">
内容C
</div>
</div>
</div>
</template>

<script>
export default {
data() {
return {
tabs: ['Tab A', 'Tab B', 'Tab C'],
activeIndex: 0,
};
},
};
</script>

<style>
.tabs .tab {
cursor: pointer;
padding: 5px;
border: 1px solid #ccc;
margin-right: 5px;
}

.tabs .tab.active {
background-color: #f0f0f0;
}

.tab-content > div {
padding: 10px;
border: 1px solid #ccc;
border-top: none;
}
</style>