vue.js - vue2.0中如何控制v-for的循環(huán)次數(shù)?

v-for 循環(huán)的次數(shù)取決于你要循環(huán)的元素的length

你想達到每次取倆個值

var l = 0;  //全局
//每次觸發(fā)下一頁執(zhí)行
var newArr = arr.slice(l,l+2)
l = l + 2
v-for 循環(huán) newArr數(shù)組

從兩種角度來解決。本質問題其實是一個分頁的問題。
你可以交給后端，在當前接口加上一個當前頁碼。點擊第一頁就傳一個0過去，還可以加上一個頁數(shù)，這個樣子以后如果你想顯示三個四個也是沒有問題的。而后端只給你這一頁的數(shù)據(jù)。
個人覺得這種方案會更好一點。

如果后端執(zhí)意給你返回很多的數(shù)據(jù)(不推薦，因為如果這里數(shù)目很多怎么辦，最終還是要進行分頁處理的)
這個時候你可以使用一個計算屬性，或者在加載的時候使用一個loading在加載完成后重新渲染視圖。把后端的數(shù)組進行解析，變成一個二維數(shù)組，或者其他的你覺得可以進行處理的方案。然后每次v-for都是循序這個數(shù)組，而使用二維數(shù)組的好處是你可以
v-for item of list[i]
i就是你的分頁下標。
這個樣子這個功能就可以很簡單的完成了
但是推薦還是跟后端進行溝通

<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
    }
  }
})

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

• 直接在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就會隨之改變
    }
}