vue에서 v-for로 반복 횟수를 제한하는 법이 있나요?? + vue lazy loading

Question

안녕하세요, 현재 vue를 통해서 모바일 화면을 개발 중입니다. api를 호출하여 데이터를 get한 후, 그 데이터들을 화면에 뿌려주는 페이지를 개발 중에 있습니다.특정 갯수(ex:10개)만 먼저 불러오고, 추후에 스크롤을 내려서 끝부분에 다다르게 되면 추가로 특정 갯수를 로딩하는방식을 구현하려고 하는데, 혹시 v-for로 구현이 가능한지 궁금합니다.구글링을 통하여 해당 내용이 lazy loading이라는 것을 알게 되었는데, v-for로 구현이 불가능하다면vue에서 v-for문의 내용의 lazy loading을 구현하려면 어떻게 해야하는지도 궁금합니다.

yang_rail · Answer

<img v-lazy&#61;./imgUrl> 이런식으로 진행하시면됩니당. v-lazy 는 npm install 하시고용.

yang_rail · Answer

vue-virtual-scroll-list 이거쓰셔도 원하시는숫자대로 출력할수도있습니당.

Gear · Answer

좋은 방법인진 모르겠지만, 저라면 서버에서 페이징된 데이터를 뿌려주는걸 구현하고, 화면쪽에서는 그냥 가져온 데이터를 다 보여주게 할것 같네요. 정확한 요구사항은 모르겠으나, 아마도 몇 개 까지 갖고왔는지가 중요하겠지요. 아마 이런 식의 구성이 될것 같습니다:

vue에서 v-for로 반복 횟수를 제한하는 법이 있나요?? + vue lazy loading

3개의 답변

#loading 목록