시작하기
v-for디렉티브는 사용하기 쉬우면서도 강력한 리텍티브다
게시판의 게시물 목록을 렌더링할때 등 주로 무언가의 목록을 구현 할 때 주로 사용되는 디렉티브이다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Sample</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="app">
<h2>오늘 할 일</h2>
<ul>
<li>Vue 복습하기</li>
<li>v-bind, v-for 공부하기</li>
<li>내일 할 일 작성하기</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>이렇게 렌더링을 한다면 동적인 데이터는 보여줄 수 없게 된다.
이 목록들을 Vue 엘리먼트의 데이터로 설정하고 HTML에서 그 데이터를 불러와 v-for를 사용하여 반복적으로 렌더링 해볼 것이다.
사용하기
먼저 데이터들을 객체 배열 형식으로 작성한다.
var app = new Vue({
el: "#app",
data: {
todos: [
{text : 'Vue 복습하기'},
{text : 'v-bind, v-for 공부하기'},
{text : '내일 할 일 작성하기'}
]
}
});이제 v-for 디렉티브를 사용 할 차례이다.
이 디렉티브는 item in items의 형식으로 작성한다
여기서 items는 Vue 엘리먼트의 데이터 안에 들어있는 배열 이름으로 설정하고 item은 렌더링 하게 될때 각 원소를 가르키는 별칭이다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Sample</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="app">
<h2>오늘 할 일</h2>
<ul>
<li v-for="todo in todos">{{todo.text}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>이렇게 작성하고 실행시켜 보면 맨 처음의 li를 반복하여 작성한 결과와 같은 결과가 나온다.
index값 받아오기
렌더링을 할 때 각 원소들의 index값을 가져오려면 디렉티브 값에
(todo, index) in todos형식으로 작성을 한다.
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Sample</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div id="app">
<h2>오늘 할 일</h2>
<ul>
<li v-for="(todo, index) in todos">{{index}}{{todo.text}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>여기서 index는 임의대로 지정한 이름이므로 다른 변수로 대체해도 상관없다. 이 인덱스 값은 나중에 리스트에 있는 값을 제거 및 수정 할 일이 있을때 이 값을 참조하여 처리한다.
