Vue循环出来的数据 如何单独点击控制。

Vue循环出来的数据如何单独点击控制，这个问题看起来有点挑战性，但实际上是一个很好的学习机会。首先，让我们理清问题：我们有一个父元素列表，每个父元素都有一个子元素列表。点击父元素时，如果子元素没有显示，就显示它；反之，如果已经显示，就隐藏它。

为了实现这一点，我们可以使用一个数组来记录哪些父元素的索引被点击过。当点击父元素时，我们会检查该索引是否已经存在于数组中。如果不存在，我们就把它添加到数组中；如果已经存在，我们就把它从数组中删除。这种方法简单且有效，适用于大多数情况。

但是，我们可以更进一步！比如，如果我们想控制子元素的显示状态，除了简单的显示和隐藏，可能还需要懒加载或者动态加载子元素。这时候，我们可以将子元素的加载逻辑与父元素的点击事件结合起来，进一步提高应用的性能和用户体验。

再想一步，如果我们想要更复杂的交互，比如排序、过滤或搜索子元素，该如何处理呢？这时候，我们可能需要将子元素的数据和父元素的数据分开管理，或者使用更多的状态管理工具，比如Vuex。这些方法不仅让代码更清晰，还提高了维护性。

总之，解决这个问题不仅是实现基本的显示/隐藏功能，更是提升应用性能和用户体验的机会。试着把这些想法加入到你的项目中，看看效果如何！

<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>