VueJS day7

v-for

v-for

v-for를 사용하면 배열을 기반으로 리스트를 렌더링 할 수 있다.

<p v-for="배열이름(별칭) in 원본배열이름">
	
</p>

이렇게 속성명을 부여하고

 var app = new Vue({
     el: '#app',
     data: [
         {속성명: "데이터1"},
         {속성명: "데이터2"},
         {속성명: "데이터3"}
     ]
 })

예제를 살펴보자

<div id="app">
    <div v-for="person in people">
         
    </div>
</div>

var app = new Vue({
    el: '#app',
    data: {
        people:[
            {name:'a', age:20},
            {name:'b', age:30},
            {name:'c', age:40},
            {name:'d', age:50},
            {name:'e', age:60}
        ]
    }
})

v-for를 이용하여 넘버링

<table>
    <tbody v-for="i in 5">
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

v-for를 이용하여 객체 속성 반복

<ul id="app">
    <li v-for="value in object">
        
    </li>
</ul>

new Vue({
    el: '#app',
    data: {
        object: {
            product: '삼성노트북',
            price: 1200000,
            regdate: '2022-02-28'
        }
    }
})