Vue2實現tab切換

以下代碼實現了一個tab切換的功能，點擊不同的tab會切換到對應的內容，并且選中的tab文字帶下劃線，下劃線寬度比文字寬度短，并且與文字居中。

<template><div><div class="tabs"><div v-for="(tab, index) in tabs" :key="index" class="tab" :class="{ 'active': activeTab === index }"@click="activeTab = index">{{ tab }}<div class="underline" v-if="activeTab === index"></div></div></div></div>
</template><script>
export default {data() {return {tabs: ['Tab 1', 'Tab 2', 'Tab 3'],activeTab: 0}}
}
</script><style>
.tabs {display: flex;justify-content: space-around;
}.tab {position: relative;padding: 10px;cursor: pointer;
}.underline {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 80%;height: 2px;background-color: black;
}.active {font-weight: bold;
}.active .underline {display: block;
}
</style>