Contents

1. v-if

<button @click="awesome = !awesome">전환</button>

<h1 v-if="awesome">Vue는 정말 멋지죠!</h1>
<h1 v-else-if="pretty">Vue는 정말 예쁘죠!</h1>
<h1 v-else>아닌가요? 😢</h1>
Code language: HTML, XML (xml)

<!-- 여러 tag를 묶는 법 -->
<template v-if="ok">
  <h1>제목</h1>
  <p>단락 1</p>
  <p>단락 2</p>
</template>
Code language: HTML, XML (xml)

2. v-show

<h1 v-show="ok">안녕!</h1>
Code language: HTML, XML (xml)

v-if와 차이점은 v-show가 있는 엘리먼트는 항상 렌더링 되고 DOM에 남아 있다는 것입니다.

display CSS 속성만 전환한다.

v-show는 <template> 엘리먼트를 지원하지 않는다.

또한 v-else와 상호작용하지 않는다.

3. v-if? v-show?

	v-if	v-show
렌더링	참일 때만 렌더링	항상
전환 비용	크다	적다
초기 렌더링 비용	적다	크다
용도	런타임 시 조건이 변경될 가능성이 낮음	자주 전환하는 경우

4. v-if와 v-for

[Vue.js] 리스트 렌더링

1. 배열 가. 기본 문법 배열을 리스트로 렌더링 할 수 있습니다. 현재 아이템의 index도 지원한다. 당연히 중첩 for문도 가능하다. 을 이용할 수도 있다. 나. Destructuring Assignment v-for는 JavaScript의 for문과 비슷하다. Destructuring Assignment(구조 분해 할당)도 사용할 수 있다. … 더 읽기

[Vue.js] 조건부 렌더링

1. v-if

2. v-show

3. v-if? v-show?

4. v-if와 v-for

댓글 남기기 응답 취소