国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Bagaimana untuk menambah kelas aktiviti secara dinamik untuk gelung menu dalam Vue Js?
P粉793532469
P粉793532469 2023-08-25 20:24:48
0
1
517
<p>Bagaimana untuk menambah kelas aktif dalam gelung yang memaparkan menu secara dinamik? Saya tidak boleh menetapkan kelas aktiviti untuk menu yang dibuka. </p> <pre class="brush:php;toolbar:false;"><a v-bind:href="module.route"class="nav-link"> //module.route ialah lajur pangkalan data <i :class="module.icon" ></i> //module.icon ialah lajur pangkalan data <p> {{ module.name }} //module.name ialah lajur pangkalan data </p> </a></pre> </li> <p>Ia memaparkan senarai menu daripada pangkalan data. Sekarang baru nak aktifkan menu buka. </p>
P粉793532469
P粉793532469

membalas semua(1)
P粉600845163

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í),使用@clickactive_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í) */
} 
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan