Vue Tutorial 따라하기 - List Rendering

Vue를 사용하여 리스트에 접근하기 위해서는 v-for 옵션을 사용하게 된다.

 

main.js 파일의 소스코드를 보면, details라는 리스트를 생성해놨다.

const app = Vue.createApp({
    data() {
        return {
            product: 'Socks',
            image: './assets/images/socks_blue.jpg',
            inStock: true,
            details: ['50% cotton', '30% wool', '20% polyester']
        }
    }
})

이 리스트 내부 요소를 출력하기 위해 html파일 ul, li 태그에 v-for 옵션을 추가해 다음의 라인을 추가하면, 바로 밑의 실행 사진과 같이 for 루프를 돌면서 내부 요소를 출력해준다.

<ul>
  <li v-for = "detail in details">{{ detail }}</li>
</ul>

---

v-for에 옵션을 주어 전체가 아닌 필요한 부분만 출력하기.

 

main.js 파일에 생성한 app속성에 다음의 내용을 추가하고,

variants: [
    {id:2234, color:'green'},
    {id:2235, color:'blue'}
]

html 파일에서 다음과 같이 '리스트내객체명.속성명'을 통해 변수를 지정해주면, variant의 전체 내용이 아닌 해당 속성만 출력할 수 있다.

<div v-for="variant in variants">{{ variant.color }}</div>

실제 실행화면.

---

DOM 엘레먼트에 Unique Key 부여하기.

 

V-Bind의 간단한 버전으로 작성 시 ":key='리스트내객체명.속성명'" 형식으로 작성 가능.

unique key를 DOM 객체의 속성으로 부여해주면, 코드 식별을 위한 힌트로 사용할 수 있다고 한다.