Vue3 인프런 정리 - if

v-if

• 조건부로 블록을 렌더링 할 때 사용

<script>
 const flag=ref(false);
</script>
<h1 v-if"flag">Hello Vue3</h1> 

v-else

• v-if가 거짓(false)일 때 렌더링 하는 블록

  <h1 v-if="flag"> Hello Vue3 </h1>
  <h1 v-else> Good Bye </h1>

v-else-if

• v-if에 대한 'else if 블록', 여러 조건을 연결할 수 있습니다.

<script>
   const type=ref('D');
</script>
  <h2 v-if="type==='A'"> A입니다</h2>
  <h2 v-else-if="type==='B'"> B입니다</h2>
  <h2 v-else-if="type==='C'"> C입니다</h2>
  <h2 v-else> A,B,C가 아닙니다</h2>

v-show

• 요소를 조건부로 표시하는 또 다른 옵션.
• 보여줄것인지 말것인지만 결정 else 없음

<script>
  const showFlag=ref(true);
</script>
<h1 v-show="showFlag">Title입니다</h1>

v-if 와 v-show차이

v-if

• v-if는 실제(real)로 렌더링됩니다. 전환 할 때 블록 내부의 컴포넌트들이 제거되고 다시 생성되기 때문
• 또한 v-if는 게으릅니다(Lazy) 초기 렌더링 시 ,조건이 거짓(false)이면 아무 작업도 하지 않습니다.조건부 블록은 조건이 처음으로 참(true)이 될때까지 렌더링되지 않습니다.

v-show

• v-show는 엘리먼트는 CS 기반전환으로 초기 조건과 관계 없이 항상 렌더링됩니다. (v-show는 엘리먼트를 DOM에 우선 렌더링하고 조건에 따라 CS display:block/display:none속성을 전환 )
• 일반적으로 v-if는 전환 비용이 높은 반면, v-show는 초기 렌더링 비용이 높다. 그러므로 무언가를 자주 전환해야 한다면 v-show를 사용하는 게 좋고, 런타임 시 조건이 변경되지 않는다면 v-if를 사용하는게 더 좋음

v-if AND v-for

• 동일한 엘리먼트에 v-if와 v-for를 함께 쓰는 것은 권장되지 않음.

안좋은 방식

<ul>
	<li v-for="item in items" v-if="item.isActive" :key="item.id"> 
		{{ item.name }}
    </li>
</ul>

권장하는 방식

• 필터링된 목록을 뿌려주는 방식

<ul>
	<li v-for="item in activeItems" :key="item.id"> 
    	{{ item.name }}
	</li>
</ul>

• template을 사용하는 방식

<ul>
	<template v-for="item in items" :key="item.id">
	<li v-if="item.isActive" > 
    	{{ item.name }}
	</li>
</ul>