vue简单实现tab切换改变颜色

作者：System 时间：2024年08月09日分类：所有,html5 字数：739

这篇文章距离上次修改已过235天，其中的内容可能已经有所变动。

在Vue中，可以通过绑定class来实现tab切换改变颜色的功能。以下是一个简单的例子：

<template>
  <div>
    <div :class="{active: currentTab === 'tab1'}" @click="currentTab = 'tab1'">Tab 1</div>
    <div :class="{active: currentTab === 'tab2'}" @click="currentTab = 'tab2'">Tab 2</div>
    <div :class="{active: currentTab === 'tab3'}" @click="currentTab = 'tab3'">Tab 3</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'tab1', // 当前激活的tab
    };
  },
};
</script>

<style>
.active {
  color: red; /* 这里设置你想要的颜色 */
}
</style>

在这个例子中，我们有三个tabs，每个tab绑定了一个点击事件，当被点击时，currentTab的值会更新为对应的tab标识符。然后，我们使用:class绑定来根据currentTab的值动态地应用active类。active类在样式中定义了颜色。当用户点击不同的tab时，它会变成红色（或者你在样式中设置的其他颜色）。

vue简单实现tab切换改变颜色

评论已关闭

推荐阅读