Wie füge ich dynamisch eine Aktivitätsklasse für die Menüschleife in Vue Js hinzu?

Question

Wie füge ich einer Schleife eine aktive Klasse hinzu, die Menüs dynamisch anzeigt? Ich kann die Aktivitätsklasse für das geöffnete Menü nicht festlegen.

<a v-bind:href="module.route"
     //module.route ist eine Datenbankspalte
      <i :class="module.icon" </i>
        //module.icon ist eine Datenbankspalte
       <p>
         {{ Modulname }}
            //module.name ist eine Datenbankspalte
       </p>
  </a>

Es zeigt die Menüliste aus der Datenbank an. Jetzt möchte ich nur noch das geöffnete Menü aktiv machen.

Answer 1

我是这样做的。

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

我在一个名为tabs的数组中添加了所有我想要添加的选项卡。

<script>

export default {
  name: 'Home',

  data() {
    return {
      active_tab: "Tab1",
      tabs: ["Tab1", "Tab2", "Tab3"]
    }
}

</script>

这将为数组tabs中的每个tab创建一个<li>元素。

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

样式

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