vue简易菜单选择器（类似选项卡）

<div id=‘app‘>
    <div>
        你选择的是:
        <a href="javascript:void(0)" v-for="item,index in choose"@click=‘del(item,index)‘>

            {{item}}<span>X</span>
        </a>
        
    </div>
    <ul>
        <li v-for="item ,index  in dataList">
            <span :class="{red:index1===index}" @click="visiable(index)">{{item.title}}</span>
            <a href="javascript:void(0)" v-for="option,i in item.list" @click=‘addoption(option,index,i)‘:class="{active:item.index===i}">
                {{option}}
            </a>
        </li>
    </ul>
</div>

let data=[
        {title:‘品牌‘,list:[‘苹果‘,‘小米‘,‘其他‘]},
        {title:‘尺寸‘,list:[‘3.0‘,‘3.1‘,‘3.5‘]},
        {title:‘系统‘,list:[‘安卓‘,‘苹果‘,‘微软‘]},
        {title:‘网络‘,list:[‘联通‘,‘电信‘,‘移动‘]},
    ]
    data.forEach(item=>item.index=-1)
    new Vue({
        el:‘#app‘,
        data:{
            dataList:data,
            choose:{}, //为什么使用对象的方式去处理数据，对象的key不能重复
            index1:-1, //不要将索引设置为从0到数组长度-1，可以为空或者-1之类的数
        },
        methods : {
            addoption(option,index,i){
　　　　　　　　　　
               this.$set(this.choose,index,option)  
               this.dataList[index].index=i
        
            },
            del(item,index){
                this.$delete(this.choose,index)
                this.dataList[index].index=-1
            },
            visiable(index){
            
                //判断当前的项，如果是同个，就取消样式
                this.index1=this.index1===index?-1:index
            }
        }
    })