关于前端:vfor遍历默认展示三张图片点击加载更多收起

思路：

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