vue处理多个容器显示隐藏的最好方法是什么？

Question

//html
<div v-for="(item, index) in data" :class="['container', {'show': firstSwitchArr[index]}]">

//js
data: {
     firstSwitchArr: [true, false, false, false, false],
     data: data
},
methods:{
   switchShow(index) {
          this.$set(this.firstSwitchArr, index, !this.firstSwitchArr[index])
    }
}

//csss
.container{display:none}
.container.show{display:block}

vue项目中有个页面，有很多显示数据的容器，可以显示和隐藏而且分为一级列表和二级列表，显示数据的容器是通过数据遍历出来的，可以任意多少个。 我上边实现的方法就不太符合要求。有什么更好的实现方法？

Answer 1

把数组遍历成对象 key为数据 value为状态

Answer 2

ui展示交给vue去做啊，考虑到你这个是经常变换的可以用v-show，数据格式 {...,show: true or false},通过事件来切换show的值，这个属性的值用于v-show

Answer 3

建议使用以下数据格式，通过open true或者false来控制显示隐藏

[
    {
        label: 'A1',
        value: 'A1',
        open: true,
        children: [
            {
                label: 'A1-1',
                value: 'A1-1'
            }
        ]
    },
    {
        label: 'A2',
        value: 'A2',
        open: false
    }
]