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

我已经创建了两个选项卡，默认情况下，我希望在第一个

上设置活动类

然后，当选择第二个选项卡时，.active类应传递给第二个

，并从第一个选项卡中删除

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

我还创建了一个视图来查看当前输出

欢迎任何帮助，因为我很困

<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']
        };
    },
})

{{tab}

过滤器选项列表
排序选项列表
新Vue({
el:“应用程序”，
数据（）{
返回{
当前选项卡：0，
选项卡：[“筛选”、“排序”]
};
},
})

使用此选项-

：class=“{active:currentTab===index}”

---

编辑：啊，对不起，我以为你在使用vue路由器。当你的网站变得更大时，开始使用路由器可能是一个好主意，当你这样做时，这种方法对你有效。你可以在你的风格中使用

。确切的活动类

类，无需在你的JS或JSX中做任何事谢谢你Alicia的帮助。非常感激。不知道如何让你的方法在我的标签上工作，因为我没有在这里使用路由。是的，我很抱歉没有正确阅读问题；）我已经更新了我的答案。伟大的对于这个问题，我将使用@siddharth方法，但是现在感谢大家对路由的了解。你真是太好了。

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

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