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/

Answer 2

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

Vue内置了此功能

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

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

参考：Vue documentation

下面是一个示例，说明了如何在几个星期前在Markup和Styles上创建的Vue网站中实现该示例。希望对您有所帮助，如果您在实施此问题上还有其他疑问，请告诉我

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

2 个答案: