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

思路：

• v-for遍历出的数据，想要实现默认显示三张，点击更多增加三张，直到展示完毕，在点击收起，恢复默认，并且各个遍历的item互不影响
• 在data中声明两个变量，一个存储相应v-for遍历的item索引，一个用来存放默认的三张照片
• 在展开更多的方法中，通过splice来改变相应的值（$set也可以）
• imgList[index] 进行视图渲染， imgIndex[index]存放item需要增加的图片数量

• 简单来说要用新数组进行储存你想展示的状态，用另一个数组进行展开更多的数组索引设置
• 更新这两个新数组的状态，达到该需求的效果

    <div v-for="(item, index) in backEnd" :key="index">
    ...
      <div v-for="(img, index) in imgList[index]" :key="index">
        <img :src="img">
      </div>
    <span v-if="imgList[index].length < item.imgArr.length" @click="showMore(index, item)">展开更多</span>
    <span v-else @click="showLess(index, item)">收起</span>
    <img :class="{'rotateImg': imgList[index].length === item.imgArr.length}" :src="./imgArrow.jpg">
    ...
    <div>
</template>
<script>
    data () {
      return {
        backEnd: [],
        imgList: [].
        imgIndex: []
      }
    }
    created () {
      initData () {
        // 调用接口保存数据
        axios.post(url).then((res) => {
          this.backEnd = res || []
          this.backEnd.map((item) => {
            // imgList用来存放默认三张图片
            this.imgList.push(item.imgArr.slice(0, 3))
            // imgIndex用来存放点击加载需要的索引
            this.imgIndex.push(3)
          })
        })
      }
    },
    method: {
     showMore (index ,item) {
       // 设置imgIndex的第index的值加3，用来增加显示图片
       this.imgIndex.splice(index, 1, this.imgIndex[index] + 3)
       // 设置视图渲染的图片数量
       this.imgList.splice(index, 1, item.imgArr.slice(0, this.imgIndex[index]))
     },
     showLess (index, item) {
       // 恢复默认imgIdex
       this.imgIndex.splice(index, 1, 3)
       // 恢复成默认三张的状态
       this.imgList.splice(index, 1, item.imgArr.slice(0, this.imgIndex[index]))
     }
    }
</script>