Vue 조건문 v-if v-else v-else-if

Vue에서 조건에 따라서 렌더링 할 수 있습니다.

• v-if
• v-else
• v-else-if

구문을 이용하면 됩니다.

 

직접 사용하면서 확인해 보겠습니다.

 

v-if

v-if문은 조건에 따라서 엘리먼트를 렌더링 할 수 있습니다.

const App = {
   data() {
     return {
       score: 100
     }
   }
}

위 와 같이 score를 100으로 지정하고

<h2 v-if="score > 90">A학점입니다.</h2>

score가 90점 이상이면 렌더링 됩니다.

 

v-else

v-else는 v-if문의 조건이 아닌 경우에 렌더링 할 엘리먼트에 적용하면 됩니다.

const App = {
   data() {
     return {
       score: 80
     }
   }
}

score를 80으로 변경하고

<h2 v-if="score > 90">A학점입니다.</h2>
<h2 v-else>B학점 입니다.</h2>

v-else가 타게 되어 B학점입니다. 표시됩니다.

 

v-else-if

v-if 문 다음에 다음 조건에 해당되는 조건이 있으면 렌더링 되게 됩니다.

const App = {
   data() {
     return {
       score: 88
     }
   }
}

score를 88점으로 수정하겠습니다.

<h2 v-if="score > 90">A학점입니다.</h2>
<h2 v-else-if="score > 85">B+ 학점입니다.</h2>
<h2 v-else>B학점 입니다.</h2>

score가 88점이므로 B+ 학점입니다가 표시됩니다.

 

학점계산기

마지막으로 v-if, v-else-if, v-else를 이용하여 학점 계산기를 만들어보도록 하겠습니다.

<div id="app">
  <p><label>점수를 입력하세요(1~100)</label></p>
  <p><input type="number" v-model="score"></p>
  <div v-show="score">
    <h2 v-if="score > 90">A학점입니다.</h2>
    <h2 v-else-if="score > 80">B 학점입니다.</h2>
    <h2 v-else-if="score > 70">C 학점입니다.</h2>
    <h2 v-else-if="score > 60">D 학점입니다.</h2>
    <h2 v-else>F 학점입니다.</h2>
  </div>
</div>

const App = {
   data() {
     return {
       score: null
     }
   }
}

const app = Vue.createApp(App);
app.mount('#app');

See the Pen Untitled by powerku (@powerku) on CodePen.