Vue list 출력하기(v-for, template)

list를 출력하는 방법은 일반적으로 for문을 돌려 요소의 name, description 등이 나타나도록 했다.

vue에서 list 출력하는 방법은 무엇일까.

 

HTML

<div id="app">
    <ul style="list-style:none;">
        <li v-for="item in items">
            {{item.id}}
            <img :src="item.image"/>
            <p>{{item.title}}</p>
        </li>
    </ul>
</div>

* v-for 속성

: 반복해서 출력할 태그(위 예시는 li를 여러 개 출력)에 v-for 속성을 입력한다.

 

* v-for 속성 값

: " 항목(list)을 담을 변수 in 반복문을 사용할 <배열> "

 

* v- for 속성을 가진 태그 내에 배열에서 가져온 정보들을 출력하자.

-mustache 이용 : {{ item.id }}

 

* 태그의 속성값에 배열의 정보를 출력하고 싶다면?

-콜론, 따옴표 이용 : :src="item.image"

 

 

JavaScript

* data 메소드에 items라는 배열 작성

new Vue({
    el:'#app',
    data(){
        return{
            items:[
                {
                    id:1,
                    image:'https://picsum.photos/210/118/?image=1',
                    title:'컴퓨터'
                },
                {
                    id:2,
                    image:'https://picsum.photos/210/118/?image=100',
                    title:'해변'
                },
                {
                    id:3,
                    image:'https://picsum.photos/210/118/?image=160',
                    title:'휴대폰'
                },
                {
                    id:4,
                    image:'https://picsum.photos/210/118/?image=200',
                    title:'황소'
                },
            ]
        }
    }
})

 

 

 

template

위와는 다르게 li태그 1개로 출력할 배열 정보들을 감쌀 수 없는 경우에 쓸 수 있는 <template>을 알아보자.

 

반복 출력할 태그가 li 1개라면 li에 v-for 속성을 넣고 여러 개의 li를 출력하면 된다.

 

하지만 li 여러 개를 한 세트로 묶어 여러 번 출력하고 싶다면?

li의 가장 상위 태그는 ul 태그 뿐인 것을 알고 있을 것이다. 그렇다고 ul에 v-for 속성을 받고 ul을 여러 번 출력할 수도 없지 않은가.

이런 경우에 <template>이라는 vue 제공 태그를 이용하면 되는 것이다!

<template v-for="item in items">
	<li>
    	<img :src="item.image"/>
    </li>
    <li>
    	{{ item.title }}
    </li>
</template>