[Vue.js] 조건문(v-if, v-show)

조건문

Vue.js에서 조건문은 명시한 조건에 충족할 때 해당 태그를 포함한 하위 태그를 모두 보여주고 실행할 함수나 데이터 바인딩이 있다면 이를 수행한다.

 

종류

v-if

v-if의 경우, if문의 결과가 true일 때 해당 태그를 화면에 보여주고 혹시 함수가 있다면 함수를 호출하여 실행한다.

사용자의 분류 코드에 따라 화면을 다르게 구성하거나 모달(modal)창을 띄울 때 사용하기도 한다.

v-if를 사용하면 뒤에 v-else-if와 v-else도 함께 사용한다.

 

v-if는 조건에 충족하지 않을 경우, 랜더링을 하지 않기 때문에 DOM에 남아있지 않으며, 주로 자주 바뀌지 않는 부분에 사용된다.

 

  <div>
    <div class="link" v-if="isCustomer">
      <a>프로모션 링크</a>
    </div>
    <div class="link" v-else>
      <a>관리 링크</a>
    </div>
  </div>

export default {
  name: 'App',
  data() {
    return {
      isCustomer: true,
    }
  }
</script>

 

위와 같이 v-if로 boolean 타입의 변수를 넣어주거나 true 혹은 false로 반환될 수 있는 식을 사용하면 해당 div태그부터 하위까지 모두 조건에 포함되어 아래와 같은 결과가 나타난다.

위 코드의 결과물

 

 

v-show

v-show는 특정 조건을 만족할 때 해당 부분을 보여주고, 만족하지 않으면 해당 부분을 보여주지 않는다. 입력한 조건의 일치여부 실시간으로 표시하는 등의 경우에 사용된다.

 

v-show는 코드가 실행되면 랜더링하여 DOM에 있는 상태에서 보여지는 상태만 변경하는 방식으로 동작한다. (html의 display 속성을 변경함)

위 v-if문 코드에서 v-show를 사용하여 고객들에게만 보여줄 메시지를 아래와 같이 작성해보았다.

 

    <div v-show="isCustomer">
      "환영합니다."
    </div>

 

v-show 태그 추가

 

 

읽어주셔서 감사합니다.