v-for 순환을 작성하는 기교 총집합

Vue에서.js에서 v-for 순환은 모든 항목에서 사용할 수 있는 것입니다. 템플릿 코드에서 for 순환을 작성할 수 있습니다.
가장 기본적인 용법 중에서 그들의 용법은 다음과 같다.

<ul>
 <li v-for="product in products">
  {{ product.name }}
 </li>
</ul>

그러나 본고에서 나는 당신의 v-for 코드를 더욱 정확하고 예측 가능하며 강하게 하는 6가지 방법을 소개할 것입니다.
시작합시다.
1. 항상 v-for 순환에서 key 사용하기
우선, 우리는 대부분의 Vue 개발자들이 이미 알고 있는 흔한 최선의 방법인 v-for 순환에서 사용하는 키에 대해 토론할 것이다.유일한 키 속성을 설정하면 구성 요소가 원하는 방식으로 작동하는지 확인할 수 있습니다.
만약 우리가 키를 사용하지 않는다면, Vue는 DOM을 가능한 한 효율적으로 하려고 시도할 것이다. 이것은 v-for 요소에 난서나 다른 예측할 수 없는 행위가 나타날 수 있음을 의미할 수 있다.만약 우리가 모든 요소에 대해 유일한 키 인용을 가지고 있다면, 우리는 DOM이 어떻게 조작할지 더욱 정확하게 예측할 수 있을 것이다.

<ul>
 <li v-for="product in products" :key="product._id">
  {{ product.name }}
 </li>
</ul>

2. 한 범위에서 순환
비록 대부분의 경우, v-for는 수조나 대상을 두루 훑어보는 데 사용되지만, 어떤 경우, 우리는 반드시 일정한 횟수만 순환해서 실행하기를 희망할 것이다.
예를 들어, 온라인 상점을 위한 페이지 나누기 시스템을 만들고 있다면, 우리는 페이지당 10개의 제품을 표시하기를 원할 뿐이다.변수를 사용하여 현재의 페이지 번호를 추적하면 우리는 이렇게 페이지를 나눌 수 있다.

<ul>
 <li v-for="index in 10" :key="index">
  {{ products[page * 10 + index] }}
 </li>
</ul>

3. 순환에서 v-if를 사용하지 마라
매우 흔히 볼 수 있는 오류는 v-if를 사용하여 v-for 순환 데이터를 필터하는 것이다.비록 이것은 매우 직관적으로 보이지만, 그것은 v-if 명령이 아니라 v-for를 우선적으로 고려하는 커다란 성능 문제를 초래할 것이다.
이것은 구성 요소가 모든 요소를 순환하고 v-if 조건을 검사해서 렌더링해야 하는지 확인하는 것을 의미합니다.따라서, 실제로, 조건이 무엇이든지 수조의 모든 항목을 두루 훑어볼 것입니다.
이러지 마:

// BAD CODE!
<ul>
 <li
  v-for="product in products"
  :key="product._id"
  v-if="product.price < 50"
 >
  {{ product.name }}
 </li>
</ul>

4. 계산 속성이나 방법으로 대체
상술한 문제를 피하기 위해서, 우리는 템플릿의 데이터를 두루 훑어보기 전에 그것을 필터해야 한다.매우 비슷한 두 가지 방법이 있다.
계산 속성 사용
필터링 방법 사용
이 두 가지 방법을 빠르게 소개합시다.
우선, 우리는 계산 속성을 설정하기만 하면 된다. 이전의 v-if와 같은 기능을 얻기 위해 코드는 다음과 같다.

<ul>
 <li
  v-for="products in productsUnderFifty"
  :key="product._id"
 >
  {{ product.name }}
 </li>
</ul>

// ...
<script>
 export default {
  data() {
   return {
    products: [],
   };
  },
  computed: {
   productsUnderFifty: function() {
    return this.products.filter(
     (product) => product.price < 50
    );
   },
  },
 };
</script>

아래의 코드는 거의 같지만, 사용 방법은 템플릿에 접근하는 방식을 바꾸었습니다. 만약 우리가 변수를 필터에 전달하기를 원한다면, 방법이 가장 좋습니다.

<ul>
 <li
  v-for="products in productsUnderPrice(50)"
  :key="product._id"
 >
  {{ product.name }}
 </li>
</ul>

// ...

<script>
 export default {
  data() {
   return {
    products: [],
   };
  },
  methods: {
   productsUnderPrice(price) {
    return this.products.filter(
     (product) => product.price < price
    );
   },
  },
 };
</script>

5. 순환에서 항목의 색인에 접근
그룹을 훑어보고 모든 요소에 접근하는 것 외에, 우리는 모든 항목의 색인을 추적할 수 있다.
이를 위해, 우리는 프로젝트 뒤에 색인 값을 추가해야 합니다. 이것은 매우 간단합니다. 페이지를 나누고, 목록 색인을 표시하고, 순위를 표시하는 데 사용할 수 있습니다.

<ul>
 <li
  v-for="(products, index) in products"
  :key="product._id"
 >
  Product #{{ index }}: {{ product.name }}
 </li>
</ul>

6. 하나의 대상을 두루 훑어보다
지금까지 우리는 v-for를 사용하여 그룹을 훑어보는 것만 보았지만, 대상의 키 값을 쉽게 훑어볼 수 있다.
액세스 요소의 인덱스와 유사합니다. 순환에 다른 값을 추가해야 합니다.만약 우리가 매개 변수로 대상을 훑어본다면, 우리는 모든 항목을 훑어볼 것이다.
만약 우리가 다른 매개 변수를 추가한다면, 우리는 items와 키를 얻을 것이며, 세 번째를 추가한다면, 우리는 v-for 순환의 인덱스에 접근할 수 있습니다.
만약 우리가 제품 중의 모든 미디어 자원을 두루 훑어보아야 한다고 가정하자.

<ul>
 <li
  v-for="(products, index) in products"
  :key="product._id"
 >
  <span v-for="(item, key, index) in product" :key="key">
   {{ item }}
  </span>
 </li>
</ul>

총결산
이 짧은 글은 Vue의 v-for 명령을 사용하는 최선의 방법을 가르쳐 줄 수 있기를 바랍니다.
당신은 또 다른 건의가 있습니까?
이상은 더 좋은 v-for 순환의 6가지 기교를 작성하는 상세한 내용입니다. v-for 순환에 관한 더 많은 자료는 저희 다른 관련 글에 주목하세요!