这篇博客探讨了如何在Vue中通过v-if指令动态控制列表的显示和隐藏。作者建议使用两个v-for循环分别渲染大分类和子分类，并在每个大分类下定义show变量。点击事件中传递索引来切换对应的show状态，从而实现列表的显示和隐藏。这种方法提高了用户体验，同时也考虑了性能优化，使用v-show代替v-if来减少DOM操作。
可以直接在分类按钮上面绑定个点击事件然后给列表弄上v-if
HTML:
分类
- 1
- 2
- 3
当然，show这个变量也不要忘了在dada中定义。
v-if的介绍可以看这里
回答下面的评论：
大概的思路是用两个v-for把你的大分类和分类下的列表渲染出来(还有在每个大分类下定义show变量)，然后在点击事件中传入对应的i，用于改变对应的show。也可以参考楼下的，为了提高性能，可以把v-if换成v-show
HTML:
{{menu.title}}
- {{list}}
script：
...
data: {
menus: [{
title: "分类",
show:false,
lists: [1, 3, 4]
}, {
title: "工艺",
show:false,
lists: [1, 3, 4]
}]
},
methods: {
change: function(i) {
this.menus[i].show=!this.menus[i].show
}
}
扫一扫
607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
