Vue Js - v-for X time(범위 내)을 통한 루프

Vue Js - v-for X time(범위 내)을 통한 루프

다음을 통해 루프를 반복하는 방법v-forX(예: 10)번?

// want to repeat this (e.g.) 10 times

<ul>
  <li v-for="item in shoppingItems">
    {{ item.name }} - {{ item.price }}
  </li>
</ul>

이 문서에는 다음이 표시된다.

<ul>
  <li v-for="item in 10">{{ item }}</li>
</ul>

// or 

<li v-for="n in 10">{{ n }} </li>

// this doesn't work

<li v-for="item in 10">{{ item.price }}</li>

하지만 Vue는 어디에서 사물의 출처를 알까?의사 말대로 렌더링하면 항목 수와 항목 수는 알 수 있지만 내용은 없다.

범위 내에서 인덱스를 사용한 다음 인덱스를 통해 어레이에 액세스하십시오.

<ul>
  <li v-for="index in 10" :key="index">
    {{ shoppingItems[index].name }} - {{ shoppingItems[index].price }}
  </li>
</ul>

이 값은 1-색인: 첫 번째 반복에서,index1번이고, 2번 반복할 때index2개, 기타 등등.

자세한 내용은 공식 설명서를 참조하십시오.

도브 벤자민의 도움으로 이렇게 해결했다.

<ul>
  <li v-for="(n,index) in 2">{{ n }}, {{ index }}</li>
</ul>

참고로 이 경우에는n1-162이고index0-118이다.

그리고 V1.x 및 2.x의 Vue.js에 대한 다른 방법

Vue 1:

<p v-for="item in items | limitBy 10">{{ item }}</p>

Vue2:

// Via slice method in computed prop

<p v-for="item in filteredItems">{{ item }}</p>

computed: {
   filteredItems: function () {
     return this.items.slice(0, 10)
     }
  }

나는 덧붙여야만 했다.parseInt()번호표를 보고 있다고 v-she tell it was looking a num.

<li v-for="n in parseInt(count)" :key="n">{{n}}</li>

기본 JS 슬라이스 방법을 사용할 수 있음:

<div v-for="item in shoppingItems.slice(0,10)">

슬라이스() 메서드는 배열에서 선택한 요소를 새 배열 개체로 반환한다.

마이그레이션 가이드의 팁 참조: https://vuejs.org/v2/guide/migration.html#Replacing-the-limitBy-Filter

  <p v-for="i in 5" :key="i"> {{ i }} </p>

범위 내 v-for도 마찬가지다.

<li v-for="n in 20 " :key="n">{{n}}</li>

해결할 수 있는 방법은 두 가지야

첫 번째는,

<div v-for="(item, index) in items.slice(0,10)" :key="index">

두 번째는.

<li v-for="item  in 20 " :key="item">{{item}}</li>

답을 얻길 바래, 고마워.

2.2.0+에서는 구성 요소와 함께 v-for를 사용할 때 이제 키가 필요하다.

<div v-for="item in items" :key="item.id">

출처

x번 반복하려면 다음을 사용하십시오.

<div v-for="(item, index) in 10" :key="index">{{ item }}</div>

참조URL: https://stackoverflow.com/questions/44617484/vue-js-loop-via-v-for-x-times-in-a-range