v-for

v-for는 우리가 흔히 알고있는 프로그래밍 언어의 for문의 개념과 비슷하다.

배열의 있는 값을 순서대로 뿌려주는데.

최근에 c# 언어를 계속 공부하다보니 c#의 foreach와 비슷하다고 느껴진다.

 

먼저 html

<!-- app은 vue 인스턴스 이다. -->
<div id="app">
   <ul>
      <!-- todos에 있는 값을 todo에 넣은후에 하나씩 뿌려준다. 여기서 todo는 다른 문자로 해도 상관없다. -->
      <!-- todos에 있는 id라는 값을 통해서 키 값을 정해준다. -->
      <li v-for="todo in todos" v-bind:key="todo.id">
         <!-- v-model을 통해서 todos안에 있는 done과 양방향 연결시켜 주었다. 이 부분은 나중에 한번더 정리 해 두어야 한다.-->
         <input type="checkbox" v-model="todo.done">
         <!-- 
            v-bind를 통해서 class문을 제어하는데 기준은 todos에 있는 done으로 판단한다 
            즉 done이 true이면 done class가 적용되고
            false일 경우 done class는 적용되지 않는다.
         -->
         <span v-bind:class="{ done: todo.done }">{{ todo.title }}</span>
      </li>
   </ul>
</div>

 

다음은 js

const vm = new Vue({
   el: "#app",
   data: {
      todos: [
         {
            id: '1',
            title: 'sample data #1',
            done: true
         },
         {
            id: '2',
            title: 'sample data #2',
            done: false
         },
         {
            id: '3',
            title: 'sample data #3',
            done: true
         },
         {
            id: '4',
            title: 'sample data #4',
            done: false
         },
         {
            id: '5',
            title: 'sample data #5',
            done: true
         },
      ]
   }
});

 

마지막으로 css

li span.done {
    text-decoration: line-through;
}

 

출력값은 아래와 같이 표현된다 li값을 통해서 todos에 있는 값들이 나타나고

done이 true일경우 done class가 추가되어 css가 적용되며 각각의 checkbox들이 연결되어있는 구조이다.