vue实现简单选项卡

vue简单实现选项卡

Html

 <div class="list" v-for="(item,index) in list" :key="index" :class="{active:index === con}" @click="tab(index)">{
  {item.name}}</div>
      <div class="content" v-show="con === 0">1</div>
      <div class="content" v-show="con === 1">2</div>
      <div class="content" v-show="con === 2">3</div>

script

 data() {
    return {
      list:[
           {name:'选项卡1'},
           {name:'选项卡2'},
           {name:'选项卡3'},
        ],
        con:0,
      }
  },
  methods: {
    tab(index){
          this.con =index
    }
    },

css

.list{
  display: