VueJs에서 반복을 제한하는 방법

Question

posts 개체를 반복하고 테이블을 채우는 코드 조각이 있습니다.

<table> 
    <tr v-for="post in posts" :key="post.id"> 
     <td>{{post.id}}</td> 
     <td>{{post.title}}</td> 
     <td>{{post.body}}</td> 
    </tr> 
</table> 

현재 나는 50 postsposts 객체의 타사 API 호출에서 오는 있습니다.

50 개의 게시물이 모두 표시되지 않고 10 개의 게시물 만 표시되도록하려면 반복을 10 회로 제한 할 수 있습니까? 무엇이 가장 vuejs 해결 방법입니까?

PS : 방금 vuejs으로 시작했습니다.

당신은 v-for 지침의 각 요소의 인덱스를 추적하고 특정 인덱스 과거 렌더링 할 수있는 v-if을 사용할 수 있습니다

Answer 1

: posts.slice에

이

<tr v-for="post, index in posts" :key="post.id" v-if="index < 10">