Vue.js의 조건부 렌더링은 v-if, v-else-if, v-else 지시문을 사용하여 수행됩니다. 조건부 렌더링은 조건이 true인 경우에만 HTML 요소가 생성됩니다.
기본 예제
예를 들어, 변수 typewritersInStock이 true인 경우 "재고 있음"이라는 텍스트를 생성하고, false인 경우 "재고 없음"이라는 텍스트를 생성할 수 있습니다.
<p v-if="typewritersInStock">
in stock
</p>
<p v-else>
not in stock
</p>
Vue의 조건
조건 또는 "if-statement"는 true 또는 false입니다. 조건은 한 값이 다른 값보다 큰지 확인하기 위해 두 값을 비교하는 경우가 많습니다.
우리는 이러한 검사를 수행하기 위해 >, <, >=, <=, ===, !== 같은 비교 연산자를 사용합니다. 비교 검사는 && 또는 || 같은 논리 연산자와 결합될 수도 있습니다.
예제 코드
변수 typewriterCount가 0보다 큰 경우 "in stock" 메시지를 표시하고, 그렇지 않은 경우 "not in stock" 메시지를 표시하는 예제입니다.
<p v-if="typewriterCount > 0">
in stock
</p>
<p v-else>
not in stock
</p>
함수의 반환 값 사용
비교 검사를 사용하는 대신 v-if 지시문과 함께 함수의 true 또는 false 반환 값을 사용할 수 있습니다.
특정 텍스트에 'pizza'라는 단어가 포함되어 있으면 적절한 메시지와 함께 <p> 태그를 만듭니다. includes() 메소드는 텍스트에 특정 단어가 포함되어 있는지 확인하는 기본 JavaScript 메소드입니다.
예제 코드
아래는 v-if 지시문을 사용하여 텍스트에 'pizza'라는 단어가 포함되어 있는지 확인하는 예제입니다.
<div id="app">
<p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
});
app.mount('#app');
</script>
결론
v-if 지시문은 조건부 렌더링을 간편하게 구현할 수 있는 강력한 도구입니다. 이 글에서 소개한 예제를 통해 v-if 지시문의 기본 사용법을 익히고, 다양한 조건을 처리하는 방법을 배울 수 있습니다. Vue.js를 사용하여 동적이고 반응형 웹 애플리케이션을 개발해 보세요.