예제 코드에서 condition 데이터의 값을 A, B, C, D, E로 바꿔가면서 실행해 보세요. 각 조건에 맞는 HTML 요소가 화면에 표시되는 것을 볼 수 있습니다.

그림 3-16 실행결과

● v-show

v-show는 v-if 디렉티브처럼 조건부 렌더링 기능을 구현하는 디렉티브입니다. 디렉티브에 할당된 값의 참/거짓에 따라 <template> 태그 영역에 작성된 요소를 숨기거나 보여줍니다.

다음 코드에는 v-show 디렉티브의 값을 참과 거짓으로 각각 할당한 <p> 태그로 작성한 요소가 있습니다.