vue tabNav 点击

<template>
    <div class="content">
        <header class="tab_nav">
            <div v-for="(item,index) in tabNav" :key="index" @click = "selected(index, $event)" :class="{'active':item.active}">
                <img :src="item.imgUrl" alt="icon">
                <span>{{item.title}}</span>
            </div>
        </header>
        <main></main>
        <footer></footer>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabNav:[
                    {title:'我参与的',active:true,imgUrl:'/src/images/index/participate.png'},
                    {title:'我发布的',active:false,imgUrl:'/src/images/index/publish.png'},
                    {title:'我抽奖的',active:false,imgUrl:'/src/images/index/luck_draw.png'},
                ]
            }
        },
        methods: {
            selected: function(index) {
                this.tabNav.forEach(e => e.active = false);
                this.tabNav[index].active = true;
            }
        }
    }
</script>

<style scoped lang="less">
    .border{
        content: '';
        display: block;
        width: 1px;
        height: 1.5rem;
        background: #D9D9D9;
        position: absolute;
        top: 0.75rem;
    }
    .tab_nav{
        display: flex;
        width: 100%;
        height: 2.5rem;
        background: #fff;
        opacity: 0.5rem;
        &>div{
            height: 2.5rem;
            width: 33.33%;
            opacity: 0.5;
            text-align: center;
            &:nth-of-type(2) {
                position: relative;
                &::before{
                    .border;
                    left: 0;
                }
                &::after{
                    .border;
                    right: 0;
                }
            }
            &>img{
                width: 1rem;
                height: 1rem;
                display: block;
                margin:  0.5rem auto 0;
            }
            &>span{
                display: block;
                font-size: 0.5rem;
                color: #69728E;
                line-height: 0.8rem;
            }
        }
        &>div.active {
            color: #69728E;
            opacity: 1;
        }84 

    }

</style>