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

本文介绍: vue 实现 tab 导航切换改变选中的颜色

在项目开发中，我们经常会碰到Tab 切换的功能，而在Vue中想实现这样的功能也应该有很多种，常用的三种应该是 Tab 路由切换、Tab 动态组件切换、通过 v–show 设置Tab 显示隐藏。我们今天要说的是用v-bind 绑定元素点击事件实现

1.css 部分：

.tab{
        width: 240px;
        height: 40px;
        display: flex;
       }
       .tabItem{
        width: 80px;
        height: 40px;
        border: 1px solid #cccc;
        text-align: center;
        line-height: 40px;
       }
       .tabItemActive{
        width: 80px;
        height: 40px;
        background-color: pink;
        border: 1px solid #cccc;
        text-align: center;
        line-height: 40px;
       }

html 部分：

&lt;div id="app"&gt;
        &lt;div class="tab"&gt;
            &lt;div :class="index==0 ? 'tabItemActive' : 'tabItem'" @click="index=0"&gt;首页</div&gt;
            <div :class="index==1 ? 'tabItemActive' : 'tabItem'" @click="index=1"&gt;详情</div&gt;
            <div :class="index==2 ? 'tabItemActive' : 'tabItem'" @click="index=2"&gt;客服</div>
        </div>
           

    </div>

js 部分：

<script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            // 挂载dom
            el: "#app",
            data:{
                index:0
            },
            
           
        })
    </script>