[Vue.js] Vue 조건부 렌더링 (Conditional Rendering)

조건부 렌더링  (Conditional Rendering)

 

# v-if​

v-if 디렉티브는 조건부로 표현식이 참인 경우 블록을 렌더링.

(초기 조건이 false면 아무 작업도 실행x)

<script>
  export default{
    data(){
      return{
        awesome:true,
      }
    }
  }
</script>

<template>
    <h1 v-if="awesome">Vue는 정말 멋지죠!</h1>
</template>

 

 

# v-else​

v-else 디렉티브로 v-if에 대한 참이 아닌 경우를 렌더링.

<script>
    const awesome = true;
</script>

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

    <h1 v-if="awesome">Vue는 정말 멋지죠!</h1>
    <h2 v-else>아닌가요? 😢</h2>
</template>

 

 

# v-else-if​

v-if에 대한 "else if 블록" 역할.

<script>
  export default{
    data(){
      return{
        type:'D'
      }
    }
  }

</script>

<template>
    <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>

 

 

# <template> v-if​

v-if는 단일 엘리먼트에 연결해야 하지만 둘 이상의 엘리먼트를 전환 시,  보이지 않는 래퍼 역할을 하는

<template> 엘리먼트에 v-if를 사용할 수 있음. 최종 렌더링된 결과에는 <template> 엘리먼트가 포함되지 않음.

<script>
  export default{
    data(){
      return{
        page:true
      }
    }
  }
</script>

<template>
	<!-- 페이지 전환 버튼 클릭시 페이지 전환 -->
    <button @click="page=!page">페이지 전환</button>
    <template v-if="page">
    	<h1>제목 1</h1>
        <p>단락 1</p>
        <p>단락 2</p>
    </template>
    <template v-else="page">
        <h1>제목 2</h1>
        <p>단락 1</p>
        <p>단락 2</p>
    </template>
</template>

 

 

# v-show

엘리먼트를 조건부로 표시하는 다른 옵션은 v-show 디렉티브.

차이점은 v-show가 있는 엘리먼트는 항상 렌더링되고 DOM에 남아 있음.

(v-show는 엘리먼트의 display CSS 속성만 전환)
v-show는 <template> 엘리먼트를 지원하지 않으며 v-else와 상호작용하지 않습니다.
→ 템플릿에서는 사용 불가하고, 템플릿안의 요소에만 사용 가능

<div v-show="true">Hello</div>

자주 전환해야 하는 경우 v-show를, 실행 중에 조건이 변경되지 않는 경우 v-if를 사용하는 것이 좋음.

 

추가로, v-if와 v-for를 함께 사용하는 것은 좋지 않습니다.

함께 사용 시, v-if가 v-for보다 우선순위가 높아 v-if 조건문에서 v-for 변수에 접근할 수 없기에 v-if와 v-for를 함께 사용은 권장 X.