Vue 조건문과 반복문

v-if

• 엘리먼트의 표시 여부를 간단히 제어할 수 있는 디렉티브
• 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩할 수 있음
• Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 전환 효과 시스템 제공
• v-else(else 조건문 구현), v-else-if(else if 조건문 구현) 와 같이 사용

기본 문법

<span v-if="변수명"></span>

사용법

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

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

v-for

• 배열의 데이터를 바인딩하여 반복문을 이용한 리스트 렌더링에 사용할 수 있는 디렉티브
• 반복되는 내용을 하나로 관리하기 위해서 key 값을 바인딩해야 함
  key값은 요소를 구별할 수 있는 unique 한 내용을 사용해야 함

기본 문법

<li v-for="item in array" :key="array.unique값">{{ item.text }}</li>

사용법

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

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})