如何切换类以显示 VueJS 中哪个选项卡处于活动状态？

Question

我创建了两个选项卡，<li>默认情况下，我希望在第一个选项卡上设置活动类。

然后，选择第二个选项卡时，.Active类应该传递到第二个选项卡<li>并从第一次移除。

我可以使用 CSS 创建一些样式规则，以便为当前处于活动状态的选项卡提供视觉指示。

我还创建了一个JS Fiddle来查看当前输出。

欢迎任何帮助，因为我被困住了。

<ul class="overlay-panel-actions-primary">
    <li v-for="(tab, index) in tabs" @click="currentTab = index">{{tab}}</li>
</ul>
<div class="content-bd">
    <div class="tab-content">
        <div v-show="currentTab === 0">
            List of filters options
        </div>
        <div v-show="currentTab === 1">
            List of sort options
        </div>
    </div>
</div>

new Vue({
  el: "#app",
    data() {
        return {
            currentTab: 0,
            tabs: ['Filter', 'Sort']
        };
    },
})

Answer 1

用这个 -

:class="{active: currentTab === index}"

<li v-for="(tab, index) in tabs" @click="currentTab = index" :class="{active: currentTab === index}">{{tab}}</li>

让我知道它是否有效。

小提琴 - https://jsfiddle.net/so3mf8h9/

更新

您也可以使用三元运算符，它也应该可以工作。

:class="currentTab === index ? 'active' : ''"