Vue+iview实现添加删除类

<style>
    .tab-warp{
        border-bottom: solid 1px #e0e0e0;
        overflow: hidden;
        margin-top: 30px;
        position: relative;
        z-index: 1;
    }
    .tab-item{
        float: left;
        height: 34px;
        line-height: 32px;
        padding: 0 20px;
        border-radius: 3px 3px 0 0;
        position: relative;
        z-index: 4;
        border: solid 1px transparent;
        transition: border .5s, color .3s;
        cursor: pointer;
    }
    .tab-item.selected{
        border-color: #e0e0e0 #e0e0e0 transparent;
        color: #2d8cf0;
    }
</style>

<template>
        <div class="tab-warp">
             <div class="tab-item" :class="{selected:index == indexCur}" v-for="(item, index) in info.tabInfo"
                 @click="setCategory(item,index)">{{item.categoryName}} 
             </div>
        </div>
</template>

<script>
        export default () {
                data(){
                      return {
                            indexCur: 0
                  }
             },
　　　　　　　　　 mathods:{

　　　　　　　　　　　　　　setCategory (item,index) {

　　　　　　　　　　　　　　 this.indexCur = index;

　　　　　　　　　},

　　　　　}
　　　　     
    }
</script>

效果图：

 

注：当 index == indexCur 时才会添加selected类，template中有些内容是接口获取来的可没必要理会