vue.js实现选项卡切换

new Vue({
  el:".body",
    data:{
    a:123,
    content:[true,false,false,false,false,false]
  }
}

<div class="main-content h-100">
    <div v-show="content[0]" class="h-100 bg-warning" id="item-user">
        用户中心
    <div v-show="content[1]" class="h-100" id="">
        内容管理
    </div>
    <div v-show="content[2]" class="h-100" id="">
         消息推送
    </div>
    <div v-show="content[3]" class="h-100" id="">
          数据统计
    </div>
    <div v-show="content[4]" class="h-100" id="">
          运营
     </div>
     <div v-show="content[5]" class="h-100" id="">
          后台管理账户，权限
     </div>
</div>

new Vue({
        el:".body",
        data:{
            a:123,
            content:[true,false,false,false,false,false]
        },
        methods:{
            switchItem:function (item) {
                console.log(item)
                for (let i = 0; i <6; i++) {
                    if(i==item){
                        this.$set(this.content,i,true);
                    } else{
                        this.$set(this.content,i,false);
                    }
                }
            }
        }
 })

<ul class="list-unstyled left-ul">
  <li class="bg-warning nav-item"><a @click="switchItem (0)" href="#person">用户中心</a></li>
  <li class="bg-info "><a @click="switchItem (1)" href="#content">内容管理</a></li>
  <li class="bg-dark "><a @click="switchItem (2)" href="#notification">消息推送</a></li>
  <li class="bg-success "><a @click="switchItem (3)" href="#data">数据统计</a></li>
  <li class="bg-warning "><a @click="switchItem (4)" href="#operate">运营</a></li>
  <li class="bg-info"><a @click="switchItem (5)" href="#system">系统设置</a></li>
</ul>