[무작정 따라하는 Vue] 2. Vue.js 조건문 반복문

 

[무작정 따라하는 Vue] 2. Vue.js 조건문 반복문

Vue.js에서 조건문과 반복문을 어떻게 사용하는지 탐구해봅니다.

 

1. 조건문

엘리먼트에 조건문을 사용하여 enable 혹은 disable을 제어하는 것을 예제로 설명합니다.

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

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

이제 나를 볼 수 있어요

이제, Javascript 콘솔에 app3.seen = fasle를 입력해 주면, 메시지가 사라지는 것을 볼 수 있습니다.

app3.seen = false

 

이 예제를 통해 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 확인했습니다. 또한 Vue 엘리먼트가 Vue에 삽입/삭제/업데이트 될 때 자동으로 트랜지션 효과를 적용할 수 있도록 시스템을 제공합니다.

 

Vue는 트랜지션 래퍼 컴포넌트를 제공하므로 다음과 같은 상황에서 모든 엘리먼트 또는 커모넌트에 대한 진입/진출 트랜지션을 추가할 수 있습니다.

• 조건부 렌더링 (v-if 사용)
• 조건부 출력 (v-show 사용)
• 동적 컴포넌트
• 컴포넌트 루트 노드

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

 

 

2. 반복문

v-for 디렉티브는 배열의 데이터를 바인딩하여 아래의 예제로 Todo 목록을 표시할 수 있습니다.

<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: '무언가 멋진 것을 만들기' }
    ]
  }
})

1.JavaScript 배우기
2.Vue 배우기
3.무언가 멋진 것을 만들기

이제 콘솔에서 app4.todos.push({text:'밥 먹기'})를 입력하면 Todo목록에 새로운 항목이 동적으로 추가 된것을 볼 수 있습니다.

app4.todos.push({text:'밥 먹기'})