vue.js - vue2.0中如何控制v-for的循环次数?

Question

有很多数据，但每次只想展示两个，当我点击下一页在显示数据中接下来的两个，
请问有什么好办

法能控制v-for的循环次数，以此达到我想要的效果呢？

Answer 1

• 直接在v-for中处理

v-for="img in [...allImgList].splice(currentPage * 2, 2)"

data(){
    return{
        currentPage:0 // 当前页码
    }
}

• 使用computed

v-for="img in currentImgList"

data(){
    return{
        currentPage:0 // 当前页码
    }
},
computed:{
    currentImgList(){ 
        let initImg = this.currentPage * 2;
        return [...this.allImgList].splice(initImg, 2); // 这样currentPage变动,currentImgList就会随之改变
    }
}

Answer 2

从两种角度来解决。本质问题其实是一个分页的问题。
你可以交给后端，在当前接口加上一个当前页码。点击第一页就传一个0过去，还可以加上一个页数，这个样子以后如果你想显示三个四个也是没有问题的。而后端只给你这一页的数据。
个人觉得这种方案会更好一点。

如果后端执意给你返回很多的数据(不推荐，因为如果这里数目很多怎么办，最终还是要进行分页处理的)
这个时候你可以使用一个计算属性，或者在加载的时候使用一个loading在加载完成后重新渲染视图。把后端的数组进行解析，变成一个二维数组，或者其他的你觉得可以进行处理的方案。然后每次v-for都是循序这个数组，而使用二维数组的好处是你可以
v-for item of list[i]
i就是你的分页下标。
这个样子这个功能就可以很简单的完成了
但是推荐还是跟后端进行沟通

Answer 3

v-for 循环的次数取决于你要循环的元素的length

你想达到每次取俩个值

var l = 0;  //全局
//每次触发下一页执行
var newArr = arr.slice(l,l+2)
l = l + 2
v-for 循环 newArr数组

Answer 4

<div v-for="(item, index) in arr" v-if="index < 2"></div>

Answer 5

<div id="app">
<ul>
  <li v-for='item in 10 ' v-if='item >= min && item <= max'>{{item}}</li>
</ul>
<button @click='add'>min + 2 current:min{{min}}</button>
<button @click='sub'>max - 2 current:max{{max}}</button>
</div>

  new Vue({
  el: "#app",
  data() {
    return {
      min: 0,
      max: 10
    }
  },
  methods: {
    add() {
      this.min += 2
    },
    sub() {
      this.max -= 2
    }
  }
})