[Vue.js] 조건문 v-if, v-else-if, v-else 사용법과 v-show 디렉티브와의 차이점

Vue.js에서 사용하는 조건문에 대해 알아봅니다. v-if를 사용하여 조건에 따른 조건부 렌더링이 가능합니다.  비교할 조건이 하나라면 v-if만 사용하여 처리하며, 2가지 일 경우, v-if와 v-else를 사용합니다. 2개 이상의 조건으로 분기해야하는 경우 v-if, v-else-if, v-else를 모두 사용하여 처리합니다. 

주의사항으로는 v-else는 v-else-if보다 선행할 수 없어요. v-else는 우선순위가 항상 제일 마지막 입니다.

v-if는 조건에 따라 엘리먼트(요소)를 렌더링함으로 요건에 맞는 것만 화면에 출력하고 나머지 조건문에 해당하는 것들은 렌더링하지 않음으로 출력되지 않아요. 개발자모드에서 HTML 소스 코드 보기를 해도 보이지 않습니다.

다음 샘플 코드들의 테스트는 jsfiddle.net 사이트에서 테스트 가능합니다.

v-if, v-else-if, else-f 샘플 테스트 코드

[HTML]

v-model 디렉티브는 양방향 바인딩 처리를 위해 사용됩니다. 

<div id="app">
  <h2>Todos:v-if, v-else-if, v-else 샘플 코드</h2>
  
  <div>
    <span>하루 용돈이 얼마입니까?</span>
    <input type="number" v-model="money" />
  </div>
  <div>
    <span v-if="money < 10000">하루 버티기 힘들겠어요.</span>
    <span v-else-if="money < 30000">점심먹고 커피 한 잔 해요</span>
    <span v-else-if="money < 50000">오늘 점심은 백화점 지하 식당?</span>
    <span v-else-if="money < 70000">전생에 나라를 구했나요?</span>
    <span v-else>개부럽다!</span>
  </div>  
</div>

[JS]

new Vue({
  el: "#app",
  data: {
    money: 0
  },
  methods: {
  }
})

[CSS]

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

div {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

[실행결과]

v-show 샘플 테스트 코드

v-show 역시 조건부 디렉티브입니다.  true와 false 값만 갖을 수 있어요. 

true 일때 화면에 출력되어 보여지고, false 때는 화면에 보이지 않습니다. 그러나 개발자 모드로 코드를 보면 삭제되지 않는 다는 것을 알 수 있어요.

[HTML]

<div id="app">
  <h2>Todos:v-show 특징 알아보기</h2>
   <div v-show="isVal">
    <p>없어지지않아!! 너의 눈에 안보일뿐이야!! style:display: none;이랑 같은 개념이야</p>
  </div>  
  <div>
    <button @click="btnClicked()">눌러봐
    </button>
  </div>  
</div>

 [JS]

new Vue({
  el: "#app",  
  data: function(){
   	return {
    	isVal: false
    }
  },
  methods: {
  	btnClicked: function(){
      this.isVal = !this.isVal
      //this.isVal = true
    },
  }
})

[CSS]

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
 
h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

[실행결과]

v-if 와 v-show 의 차이점

참고로, v-if가 항상 v-for 보다 더 높은 우선순위를 갖습니다.

[vue.js 공식 문서 설명보기]

[관련 글 더 보기]

• [Vue.js] JSFiddle 웹사이트에서 코드 작성 및 실행 결과 확인