vue的选项卡

<div id="app">
  <!-- 第一种情况 -->
  <div id="container">
    <div class="contHead">
      <ul>
        <li v-for="(item,index) in head" :class="{show:active==index}" @click="tab(index)">{{item.header}}</li>
      </ul>
    </div>
    <div class="contCen">
      <div class="contCen_01" v-if="isTab==0">000</div>
      <div class="contCen_01" v-if="isTab==1">111</div>
      <div class="contCen_01" v-if="isTab==2">222</div>
      <div class="contCen_01" v-if="isTab==3">333</div>
    </div>
  </div>
<!-- 第二种情况 -->
  <div id="container">
    <div class="contHead">
      <ul>
        <li class="{tabActive=0}" @click="tabActive=0">首页</li>
        <li class="{tabActive=1}" @click="tabActive=1">冬装</li>
        <li class="{tabActive=2}" @click="tabActive=2">男装</li>
        <li class="{tabActive=3}" @click="tabActive=3">女装</li>
      </ul>
    </div>
    <div class="contCen">
      <div class="contCen_01" v-if="tabActive===0">首页</div>
      <div class="contCen_01" v-if="tabActive===1">冬装</div>
      <div class="contCen_01" v-if="tabActive===2">男装</div>
      <div class="contCen_01" v-if="tabActive===3">女装</div>
    </div>
  </div>
</div>

 

<script>
 var testVue = new Vue({
    el:'#app',
    data(){
      return {
        // 第一种情况
         head:[
          {header:'首页'},
          {header:'冬装'},
          {header:'男装'},
          {header:'女装'}
         ],
         active:0,
         isTab:0,
        // 第二种情况
        tabActive:0,
      }
    },
    methods : {
      tab(index){
        this.active = index
        this.isTab = index
      },
    }
 });

</script>

 

<style >
body{
  padding:0;margin:0;
  width:100%;
  list-style: none;
  text-decoration: none;
  margin:0;
}
ul{
  margin:0;
  padding: 0;
}
p{
  margin:0 0;
}
#container{
  width:100%;
  height:100%;
}
#container .contHead{
  width:100%;
  overflow: hidden;
}
#container .contHead li{
  width:25%;
  height:40px;
  float: left;
  list-style: none;
  line-height:40px;
  text-align: center;
}
#container .contHead .show{
  border-bottom: 2px solid #30BEC1;
}
</style>