다른 시작점과 끝 점이있는 배열 반복

Question

어떻게 시작점과 끝 점이 다른 json 배열을 반복합니까?

20 개 항목의 목록을 말한다 ..

을 나는 0-4, 5-9, 10-14, 15-19이 ...

내가 V-을 시도했습니다 의 목록을 반복 할 다른 옵션을 사용하는 구문의 경우에는 작동하지만 작동하지 않습니다.

<tr v-for="(user, index) in json.users"> 

는 I는 제 1 루프에서 다음 사용자가 [5] 사용자 [9] 2 루프에서 등등 ... 전 해달라고

원하는 [4] 사용자에 대한 사용자 [0]가를 반복 할 한 번에 전체 루프. 나는 쪼개지는 부분에서 그것을 반복 할 필요가있다.

Answer 1

당신은 템플릿의 배열 슬라이스 수 : 여기

<div v-for="item in items.slice(0, 4)> 
    {{ item }} 
</div> 

은 예입니다 : 또는

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     items: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25] 
 
    } 
 
    } 
 
})

ul { border: 1px goldenrod solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <ul v-for="i in 5"> 
 
    <li v-for="item in items.slice((i-1)*5, (i-1)*5+5)"> 
 
     {{ item }} 
 
    </li> 
 
    </ul> 
 
</div>

---

, 당신은 구조 계산 된 속성을 만들 수 있습니다 귀하의 데이터를 쉽게 알아볼 수있는 방식으로 Y :

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     items: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25] 
 
    } 
 
    }, 
 
    computed: { 
 
    sections() { 
 
     let sections = [], size = 5; 
 
     let items = [...this.items]; 
 

 
     while (items.length > 0) 
 
     sections.push(items.splice(0, size)); 
 
     
 
     return sections; 
 
    } 
 
    }  
 
})

ul { border: 1px goldenrod solid; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> 
 
<div id="app"> 
 
    <ul v-for="items in sections"> 
 
    <li v-for="item in items"> 
 
     {{ item }} 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

사용 범위와 슬라이스 V-합니다.

Vuejs는 범위와 함께 v-for를 지원합니다.

https://vuejs.org/v2/guide/list.html#v-for-with-a-Range

<div v-for="n in (items.length/5)"> 
    <div v-for="item in items.slice(n*5, n*5 + 5)> 
    {{ item }} 
    </div> 
</div> 

주

그 다음 코드이 완료되지하고 목록은 당신이 어떤/어떤 예를 추가 할 수 5.