vue中tab中状态切换添加

直接上代码

<template>
    <div>
        <ul>
            <li v-for="(item,index) tabsArr" :key="index" @clike=toggle(index)>
                //默认第四个是被选中的 这个可以调 也可以添加类
                <p v-show=item.label>我是被切换的元素</p>
            </li>
        </ul>
    </div>
</template>
data(){
    return{
        tabsArr:[
           { name:'路飞',label:'false'},
           { name:'索隆',label:'false'},
           { name:'娜美',label:'false'},
           { name:'山治',label:'ture'},   //默认山治被选中
           { name:'乌索普',label:'false'},
           { name:'乔巴',label:'false'},
           { name:'罗宾',label:'false'},
           { name:'布鲁克',label:'false'},
           { name:'甚平',label:'false'},
        ]
    }，
    method:{
        toggle(index){
            //创建一个变量来保存状态
            let type = this.tabsArr[index].label
            //通过改变布尔值 来切换显示隐藏
            this.tabsArr[index].label = type === true ? false:true
        }
    }
}