리스트 출력은 v-for 을 이용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<li v-for="todo in todos">
{{ todo.id }}
{{ todo.todo }}
</li>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#root',
data() {
return {
todos: [
{
id: 1,
todo: 'Vue 공부하기'
},
{
id: 2,
todo: 'Vuex 공부하기'
},
{
id: 3,
todo: '투두 앱 만들기'
},
{
id: 4,
todo: '앱 배포하기'
}
]
}
}
})
</script>
</body>
</html>
id 와 todo 를 분리해서 쓰고 싶을 때 vue에서 제공해주는 template를 이용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<template v-for="todo in todos">
<span>id: {{ todo.id }}</span>
<li>{{ todo.todo }}</li>
</template>
</ul>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#root',
data() {
return {
todos: [
{
id: 1,
todo: 'Vue 공부하기'
},
{
id: 2,
todo: 'Vuex 공부하기'
},
{
id: 3,
todo: '투두 앱 만들기'
},
{
id: 4,
todo: '앱 배포하기'
}
]
}
}
})
</script>
</body>
</html>
추가로, 좋은 방법은 아니지면,
todos에 값을 추가하는 방법을 살펴보자.
그러기 위해서 먼저, new Vue로 생성된 인스턴스를 메모리에 저장시킨다.
let app = new Vue({})
F12를 눌러 콘솔창을 켜고 app.todos.push({ id: 5, todo: '버그 수정하기' }) 를 입력하면
리스트에 추가된 것을 확인 할 수 있다.
'Vue > Tutorial' 카테고리의 다른 글
| [Vue - tutorial] 배열 변경 감지 (0) | 2019.09.04 |
|---|---|
| [Vue - tutorial] event handling (0) | 2019.09.04 |
| [Vue - tutorial] attribute binding (0) | 2019.09.03 |
| [Vue - tutorial] Vue devtools (0) | 2019.09.03 |
| [Vue - tutorial] 데이터 바인딩 (Data binding) (0) | 2019.09.03 |
