v-for遍历默认展示三张图片点击加载更多/收起

思路:

  • v-for遍历出的数据,想要实现默认显示三张,点击更多增加三张,直到展示完毕,在点击收起,恢复默认,并且各个遍历的item互不影响
  • 在data中声明两个变量,一个存储相应v-for遍历的item索引,一个用来存放默认的三张照片
  • 在展开更多的方法中,通过splice来改变相应的值($set也可以)
  • imgList[index] 进行视图渲染, imgIndex[index]存放item需要增加的图片数量
  • 简单来说要用新数组进行储存你想展示的状态,用另一个数组进行展开更多的数组索引设置
  • 更新这两个新数组的状态,达到该需求的效果
    
...
展开更多 收起 ...

你可能感兴趣的:(前端vue.js)