首页 前端知识 vue简单实现tab切换改变颜色

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

2024-08-04 22:08:08 前端知识 前端哥 430 161 我要收藏

在项目开发中,我们经常会碰到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部分:

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

    </div>

js部分:

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14760.html
标签
评论
发布的文章

RapidJSON介绍

2024-08-14 00:08:38

jQuery 4 beta 震撼发布

2024-08-14 00:08:36

cJSON的使用

2024-08-14 00:08:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!