6.Directive(지시문): v-for

Vue JS

6.Directive(지시문): v-for

Clasha 2020. 4. 4. 15:08

v-for 디렉티브는, HTML 에서 for-loop 을 구현하기 위하여 사용된다. 즉, 비슷한 내용을 반복적으로 보여줄 때 사용되는데. 실제 프로젝트에서도 자주 사용된다. 예를들어서, 게시판의 게시물 목록을 렌더링 할 때, 이 디렉티브가 사용되며. 또 덧글의 목록을 렌더링 할때도 사용된다. 무언가의 목록을 구현 할 때 주로 사용된다.

이번 강좌에서도 브라우저상에서 바록 웹 코딩을 할 수 있는 JSBin(https://jsbin.com/fivomus/1/edit?html,js,output)을 이용하거나 Vue js 환경을 작성했다면 해당 환경을 이용해서 해도 된다..

간단하게 할 일 리스트를 작성해보자

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script>

  
  </script>
</head>
<body>
  
  <div id="app">
    <h2>오늘 할 일</h2>
    <ul>
      <li>Vue</li>
      <li>방 청소</li>
      <li>책 읽기</li>
    </ul>
  </div>
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>

이제 v-for를 이용해서 데이터를 불러와보겠다.

데이터 설정

우선, 렌더링 할 데이터들을 객체 배열 형식으로 자바스크립트 코드 안에 입력하자.

var app = new Vue({
  el: '#app', 
  data: {
    todos: [
      { text: 'Vue.js 튜토리얼 작성하기' },
      { text: 'Webpack2 알아보기' },
      { text: '사이드 프로젝트 진행하기' }
    ]
  }   
});

자, 이제 v-for 디렉티브를 사용해보자.

이 디렉티브는 item in items 의 형식으로 작성한다.

여기서 items 는 Vue 엘리먼트의 데이터 안에 들어있는 배열 이름으로 설정하고,

item 은 렌더링 하게 될 때, 각 원소를 가르키는 별침(alias)이다

그럼 HTML 을 다음과 같이 수정하자.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="app">
    <h2>오늘 할 일</h2>
    <ul>
      <li v-for="todo in todos">{{ todo.text }}</li>
    </ul>
  </div>
  
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>

결과창을 보자

index 값 받아오기

렌더링을 할 때, 각 원소들을 순서번호(index) 를 가져오려면, 디렉티브 값에 (todo, index) in todos 형식으로 작성을 하면 된다.

여기서 index 라는 레퍼런스 이름은 우리가 정하는 것이기 때문에, i 로 대체해도 상관 없다.

v-for는 여기까지 하고 다음은 v-model을 사용해보겠다.