Ini yang saya buat.
<!-- App.vue HTML 部分 --> <li v-for = "(tab, index) in tabs" :key="index" class="nav-link" @click="active_tab = tab" v-bind:class="{ 'active' : tab === active_tab }"> ... </li>
Saya menambah semua tab yang saya mahu tambah dalam tatasusunan yang dipanggil tabs
.
<script> export default { name: 'Home', data() { return { active_tab: "Tab1", tabs: ["Tab1", "Tab2", "Tab3"] } } </script>
Ini akan mencipta elemen <li>
untuk setiap tab
dalam tatasusunan tabs
中的每個(gè)tab
創(chuàng)建一個(gè)<li>
.
Semua elemen akan mempunyai nav-link
類,并且使用v-bind
,如果變量active_tab
等于tab
,則會(huì)將active
添加到元素的類列表中。每當(dāng)用戶點(diǎn)擊其中一個(gè)選項(xiàng)卡時(shí),使用@click
將active_tab
更改為用戶點(diǎn)擊的tab
.
Gaya
.nav-link { background-color: var(--primary-color); /* 正常時(shí)元素的外觀 */ } .nav-link.active { background-color: var(--hover-color); /* 當(dāng)元素處于活動(dòng)狀態(tài)時(shí) */ }