[vue/js] Vue 의 html 조건부 랜더링 v-if/v-else

Vue의 조건부 랜더링

해당 포스팅은 Vue 의 공식문서를 참조하여 작성하였습니다.

React에서는 조건부 랜더링을 하는 방식이 다양합니다. if, &&, || 등 여러가지 방식을 사용하여 조건부 랜더링을 구현합니다.

이는 자유도가 높지만, 협업에서 개발자의 성향에 따라서 다른 코드가 나올 확률이 큽니다.

그래서 Vue 에서는 해당 기능을 v-if, v-else라는 디렉티브로 구현했습니다.

v-if와 v-else 디렉티브 뒤에는 boolean 값이 옵니다. 해당 값이 true 이면, 랜더링을 하고, false 이면 랜더링을 하지 않습니다.

toggle이라는 함수를 만들어서 isTure의 값을 바꿔주며 조건부 랜더링을 하는 예제입니다.

<script setup>
import { ref } from 'vue';

const isTrue = ref(true);

function toggle() {
    isTrue.value = !isTrue.value;
}
</script>

<template>
    <button @click="toggle">토글 버튼 </button>
    <h1 v-if="isTrue">true 인 상태임</h1>
    <h1 v-else>false 인 상태임</h1>
</template>

<style></style>