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

Question

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

Then, when the second tab is selected, the .active class should pass to the second <li> and be removed from the first.

我可以使用 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>

如果有效请告诉我。

Fiddle - https://jsfiddle.net/so3mf8h9/

更新

你也可以使用三元运算符，它应该也可以。

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

Answer 2

编辑：啊，抱歉，我以为你在使用 vue-router。当您的站点变大时，开始使用路由器可能是个好主意，当您这样做时，此方法将适合您

Vue 内置了这个功能

您需要做的就是将其添加到您的样式表中

.router-link-exact-active {
    // Your styles go here
    border: 5px dashed red;
}

参考：Vue documentation

这是我如何在几周前创建的 Vue 站点中实现它的示例：Markup, and Styles。希望对您有所帮助，如果您对实施这个有任何疑问，请告诉我

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

How do I toggle a class to show which tab is active in VueJS?

javascript

vue.js

vuejs2

v-for