Segmented分段控制器怎么实现点击切换样式？

夏侯新杰提问于 2026-03-13 12:59:19 阅读 76

组件

我用Vue写了个分段控制器，但点选后active状态的样式没加上，不知道是哪出问题了？

试过给当前项加:class="{ active: currentIndex === index }"，但页面上就是不生效。

<div class="segmented">
  <div 
    v-for="(item, index) in tabs" 
    :key="index"
    @click="currentIndex = index"
    :class="{ active: currentIndex === index }"
    class="tab"
  >
    {{ item }}
  </div>
</div>

导航组件

我来解答赞 14 收藏

反馈

2 条解答

Top丶若溪 Lv1

在WordPress里做这种分段控制其实有个更简单的办法，不过既然你在用Vue，那咱就顺着你的思路来。

首先检查一下CSS样式是不是写对了，很多时候问题出在这。确保你有类似这样的CSS：

.tab.active {

  background-color: #007bff;

  color: white;

}

要是样式没问题，再看看数据绑定。我猜你的 currentIndex 变量初始化有问题，记得在data里定义：

data() {

  return {

    currentIndex: 0,

    tabs: ['Tab 1', 'Tab 2']

  }

}

另外，有时候Vue的响应式系统会抽风，特别是当你直接赋值数组或对象属性时。试试用 this.$set 或者干脆换个方式更新状态：

methods: {

  selectTab(index) {

    this.currentIndex = index

  }

}

然后把@click改成@click="selectTab(index)"。

最后说一句，在WordPress上做前端交互，其实有不少插件可以实现类似效果，但既然你想自己写，那就按上面的方法试试看吧。开发不易啊，摸着石头过河是常态。

2026-03-31 17:01

西门书娟 Lv1

问题大概率出在CSS优先级上，不是Vue代码的问题。

你那段模板代码写法没问题，:class 绑定是正确的。点击能触发 @click，说明数据响应式也在工作。

最常见的情况是：你给 .tab 和 .active 都写了相同的样式属性（比如 background 或 color），但 .tab 的选择器优先级更高，把 .active 的样式覆盖了。

检查一下你的CSS，大概是这样：

.tab {

  background: gray;

  color: white;

}

.tab.active {

  background: blue; /* 这个优先级更高 */

}

或者反过来，你可能写成了：

.tab {

  background: gray;

}

.active {

  background: blue; /* 如果HTML中class顺序问题，可能不生效 */

}

解决办法很简单，把 .active 的样式改成更具体的选择器：

.tab.active {

  background: blue;

  /* 其他active状态样式 */

}

这样即使 .tab 写在前面，tab.active 的优先级也足够覆盖它。

另外确保 currentIndex 在 data 里初始化了，比如 data() { return { currentIndex: 0 } }。没初始化的话有时候也会有奇怪的问题。

2026-03-13 13:02