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

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

你想達(dá)到每次取倆個(gè)值

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

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

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

<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 // 當(dāng)前頁(yè)碼
    }
}

• 使用computed

v-for="img in currentImgList"

data(){
    return{
        currentPage:0 // 當(dāng)前頁(yè)碼
    }
},
computed:{
    currentImgList(){ 
        let initImg = this.currentPage * 2;
        return [...this.allImgList].splice(initImg, 2); // 這樣currentPage變動(dòng),currentImgList就會(huì)隨之改變
    }
}