v-if, v-else-if, v-else 디렉티브는 그 개념과 구조가 자바스크립트의 if, else-if, else 문과 비슷합니다. 이해하기 쉽도록 예를 들어 보겠습니다.
v-else/src/App.vue
<script>
export default {
data() {
return {
condition: 'A',
};
},
}
</script>
<template>
<p v-if="condition === 'A'">condition 데이터의 값은 A입니다.</p> <p v-else-if="condition === 'B'">condition 데이터의 값은 B입니다.</p> <p v-else-if="condition === 'C'">condition 데이터의 값은 C입니다.</p> <p v-else-if="condition === 'D'">condition 데이터의 값은 D입니다.</p> <p v-else>어떤 조건에도 해당하지 않습니다.</p>
</template>