[VUE.JS] 조건부 렌더링(Conditional Rendering), 리스트 렌더링(List Rendering)

https://v3-docs.vuejs-korea.org/guide/essentials/conditional.html

조건부 렌더링 | Vue.js

 

v-if

v-else-if

v-else

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  A/B/C 아님
</div>

 

template 속성을 사용하여 둘 이상의 element를 다룰 수 있다.

<template v-if="ok">
  <h1>제목</h1>
  <p>단락 1</p>
  <p>단락 2</p>
</template>

 

v-show

<h1 v-show="ok">안녕!</h1>

---

https://v3-docs.vuejs-korea.org/guide/essentials/list.html

리스트 렌더링 | Vue.js

 

v-for

data() {
  return {
    parentMessage: 'Parent',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

data() {
  return {
    myObject: {
      title: 'Vue에서 목록을 작성하는 방법',
      author: '홍길동',
      publishedAt: '2016-04-10'
    }
  }
}


<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>