Array 렌더링 (v-for)

v-for

• Vue.js에서 특정 엘리먼트를 여러번 반복해서 렌더링하기 위해 v-for를 사용할 수 있다.
• React와 굉장히 유사한 점이 있는데 역시 Vue.js도 Virtual Dom을 사용하기 때문에 성능을 위해 array의 변화를 감지해서 바뀐 부분만 렌더링하기 위하여 key라는 특별한 프로퍼티를 사용한다.
  • 꼭 써!

사용법

• v-for 문법으로 array의 요소에 대해 반복문을 실행할 수 있고

<div v-for="item in some_array" :key="item.id">{{ item.name }}</div>

• 아래와 같이 파이썬 문법과 비슷하게 요소와 인덱스를 같이 반복문에서 실행할 수 있다.
• 두 경우 모두 v-bind를 이용해 key에 고유한 값을 넣어줘야 한다!!

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

 

• 아래 예시를 통해 좀 더 자세히 살펴보자. 
• people이라는 object가 요소인 array를 반복문을 통해 렌더링을 하는데 각 object의 고유한 값 id를 v-bind로 key 프로퍼티에 넣어주었다.

<template>
  <div v-for="item in people" :key="item.id">{{ item.name }}</div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { name: "lee", id: 1 },
        { name: "kim", id: 2 },
        { name: "park", id: 3 },
        { name: "duck", id: 4 },
      ],
    };
  },
};
</script>
<style scoped>
div {
  font-size: 24px;
  font-weight: bold;
}
</style>

루프 안에서의 조건문 (v-for + v-if)

• v-for에서 loop를 위해 사용하는 변수의 스코프를 v-for 안쪽의 html 엘리먼트의 요소들도 가지고 있기 때문에 해당 변수를 가지고 v-if문을 사용하기만 하면 된다..!
• 말이 어렵지만? 아래 코드를 보면 이해가 쉽게 될 것이다!!
• v-for에서 item이라는 변수를 이용해 반복문을 진행하고 v-if에서는 이 변수를 가지고 조건문에 넣어서 비교를 하고있다!

<template>
  <div v-for="item in people" :key="item.id">
    <div v-if="item.favorite === 'chicken'">
      {{ `${item.name} likes 🍗` }}
    </div>
    <div v-else-if="item.favorite === 'hamburger'">
      {{ `${item.name} likes 🍔` }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { name: "lee", id: 1, favorite: "chicken" },
        { name: "kim", id: 2, favorite: "hamburger" },
        { name: "park", id: 3, favorite: "hamburger" },
        { name: "duck", id: 4, favorite: "chicken" },
      ],
    };
  },
};
</script>
<style scoped>
div {
  font-size: 24px;
  font-weight: bold;
}
</style>

• 위 v-for/v-if로 사용한 부분을 아래처럼 삼항연산자로 바꿔서 쓸 수도 있다!

<template>
  <div v-for="item in people" :key="item.id">
    {{ `${item.name} likes` }}
    {{ item.favorite === "chicken" ? "🍗" : "🍔" }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { name: "lee", id: 1, favorite: "chicken" },
        { name: "kim", id: 2, favorite: "hamburger" },
        { name: "park", id: 3, favorite: "hamburger" },
        { name: "duck", id: 4, favorite: "chicken" },
      ],
    };
  },
};
</script>
<style scoped>
div {
  font-size: 24px;
  font-weight: bold;
}
</style>

v-for과 이벤트 같이 쓰기

• v-for 디렉티브를 이용할 때 반복을 위해 썻던 변수를 v-on 디렉티브의 이벤트 핸들러에도 사용할 수 있다
• 쉽게 말해서 for문에서 반복되는 요소를 이벤트 핸들러에서도 사용이 가능하다는 것이다

<template>
  <div>
    <h1>{{ a }}</h1>
    <button v-for="i in a.length" :key="i" @click="a[i - 1]++">
      {{ `a[${i - 1}] ++` }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: [0, 0, 0],
    };
  },
  name: "App",
};
</script>