vue 如何实现 循环列表里的点击显示更多问题

Question

现在的需求是每个列表里都有一个点击显示更多，点击之后多加载3条数据，直到数据全部展示完毕，显示收回按钮，点击收回，要每个都互不干扰

视图

数据格式

Answer 1

建议多思考一下，稍微多想一下不难：
关键点在于：
1.控制显示一直显示的数量
2.控制切换显示的按钮和列表状态
3.保持状态和数据的关连性

下面是实现：
1.data 里面配置个显示数量的常数 SHOWLEN: 3
2.给对应的数据源改组成：
{

showmore: false,
list: []

}
3.控制 v-for 中的 v-if = index > SHOWLEN - 1 && !showmore 元素隐藏
4.给 v-for 循环后面增加一个更多按钮 v-if = showmore
5.绑定事件控制 showmore 的切换

Answer 2

需要进行两次v-for循环
1、先遍历jianYanListVoList将每一个大项渲染出来
2、再第一次循环内部再循环一次，将详情列表渲染出来
结构渲染完后，关键是显示和隐藏的条件，首先你要确定你点的是第几项的展开按钮，所有在点击的时候需要记录当前点击项下表 activeIndex 。在详情列表v-show条件为 当前下表 === this.activeIndex即可