关于前端: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>