• node : v14.17.1
• Vue : v2
• Vue.js 가이드를 참고하여 작성

조건문과 반복문

v-if

• Vue에 삽입/업데이트/제거 등등 트랜지션 효과를 적용할 수 있는 속성
• v-if
  • 표현식 값의 참 거짓을 기반으로 엘리먼트를 조건부 렌더링
  • 엘리먼트 및 포함된 디렉티브 / 컴포넌트는 토글하는 동안 삭제되고 다시 작성
  • 엘리먼트가 <template>엘리먼트인 경우 그 내용은 조건부 블록이 됨
  • v-if와 v-for가 같이 사용할 경우, v-for 가 우선순위가 높음(같이 사용 추천X)

[ index.html ]

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

[ index.js ]

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

[ Rendering ]

v-for

• v-for
  • 원본 데이터를 기반으로 엘리먼트 또는 템플릿 블록에 여러번 렌더링
  • 디렉티브의 값은 반복되는 현재 엘리먼트에 대한 별칭을 제공하기 위하여, 특수 구문인 alias in expression을 사용
  • array, object, number, string, Iterable 사용가능

[ index.html ]

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

[ index.js ]

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

[ Rendering ]