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;
         } 

     }

 </style>