Bagaimana untuk menambah kelas aktiviti secara dinamik untuk gelung menu dalam Vue Js?

Question

Bagaimana untuk menambah kelas aktif dalam gelung yang memaparkan menu secara dinamik? Saya tidak boleh menetapkan kelas aktiviti untuk menu yang dibuka.

<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>

Ia memaparkan senarai menu daripada pangkalan data. Sekarang baru nak aktifkan menu buka.

Answer 1

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中的每个tab创建一个<li>.

Semua elemen akan mempunyai nav-link类，并且使用v-bind，如果变量active_tab等于tab，则会将active添加到元素的类列表中。每当用户点击其中一个选项卡时，使用@click将active_tab更改为用户点击的tab.

Gaya

.nav-link {
    background-color: var(--primary-color);
    /* 正常时元素的外观 */
}
.nav-link.active {
    background-color: var(--hover-color);
    /* 当元素处于活动状态时 */
}