Vue.js 시작하기 - #2 조건문과 반복문

엘리먼트의 존재 여부를 토글하는 것은 아주 간단합니다.

<div id="app-3">
  <p v-if="seen">이제 나를 볼 수 있어요</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

 

콘솔에서 app3.seen = false 를 입력해보세요. 메시지가 사라지는 것을 확인할 수 있습니다.

 

이 예제는 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여줍니다. 또한 Vue 엘리먼트가 Vue에 삽입/갱신/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 시스템을 제공합니다.

 

몇가지 디렉티브가 있습니다. 각 디렉티브마다 고유한 기능이 있습니다. 예를 들어 v-for 디렉티브는 배열의 데이터를 사용해 항목 목록을 표시하는데 사용할 수 있습니다.

 

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  }
})

콘솔에서 app4.todos.push({ text: 'New item' })을 입력하시면, 목록에 새 항목이 추가되는 것을 확인할 수 있습니다.