<template><div><!-- 需求 根据不同的div 来进行控制 不同的子元素 显示隐藏 --><!-- 然后 定义一个数组 把每次点击的id 添加到数组里面，然后判断数组里面有没有这个索引 来进行判断 --><div class="father" @click="isShow(index)" v-for="(item, index) in list" :key="item.id">{{ item.name }}<div v-if="showList.indexOf(index) != -1"><div class="son" v-for="key in item.children" :key="key.id">{{ key }}</div></div></div></div>
</template> <script setup>
import { ref } from "vue"const list = ref([{id: 10,name: "按钮一",children: [{id: 11,name: "按钮一的儿子"},{id: 12,name: "按钮一的儿子"},{id: 13,name: "按钮一的儿子"}]},{id: 2,name: "按钮二",children: [{id: 22,name: "按钮二的儿子"},{id: 23,name: "按钮一的儿子"},{id: 24,name: "按钮一的儿子"},{id: 25,name: "按钮一的儿子"}]},{id: 3,name: "按钮3",children: [{id: 33,name: "按钮三的儿子"},{id: 34,name: "按钮一的儿子"},{id: 35,name: "按钮一的儿子"},{id: 36,name: "按钮一的儿子"}]},{id: 4,name: "按钮4",children: [{id: 44,name: "按钮四的儿子"},{id: 45,name: "按钮四的儿子"}]}])let showList = ref([""]);console.log(list.value)const isShow = (index) => {
// 根据传入的索引来判断 是否有 这个console.log(showList.value.indexOf(index) != -1)if (showList.value.indexOf(index) == -1) {// 删除的位置 删除的 一个showList.value.push(index)} else {showList.value.splice(showList.value.indexOf(index), 1)}
}
</script>
<style scoped>
.father {padding: 2vh;/* color: red; */background-color: pink;margin: 10px;
}.son {padding: 1vh;text-align: center;background-color: red;
}
</style>
