[Vue.js] 조건문 v-if

Vue.js의 조건문(v-if)란?

Vue.js에서 사용하는 조건부 렌더링을 위한 디렉티브이다.

v-if를 사용하면 특정 조건이 참일 때만 HTML을 렌더링하거나, 표시 할 수 있다.

 

그렇기 때문에 보통 조건부에 따른 UI를 제어 할 때 유용하게 사용 된다.

 

v-if 기본 문법

v-if를 사용하여 조건부를 정의 할때는 HTML UI의 상태를 데이터로 저장해둔다.

그리고 그 상태에따라 HTML을 보여줄것인지, 말 것 인지에 대해 Vue.js문법으로 작성한다.

 

기본문법은 아래와 같다.

<template>
  <div>
    <p v-if="showMessage">이 메시지는 조건이 참일 때에만 보입니다.</p>
  </div>
</template>

export default {
  data() {
    return {
      showMessage: true // 조건에 따라 메시지를 보이거나 숨기기 위한 데이터
    };
  }
};

 

위 코드 기준 showMessage라는 데이터가 true일때는 v-if가 기입된 <p>태그가 보일 것 이고,

shwMessage라는 데이터가 false일때는 v-if가 기입된 <p>태그가 보이지 않게 된다. 이를 활용하면 모달창등과같은 ui효과를 쉽게 구현 할 수 있다.

 

 

v-if, v-else-if를 활용한 탭 컨텐츠 기능 구현

Vue.js의 조건문은 v-if라는 조건문이 존재하기때문에 v-else-if 또한 존재한다.

간단한 기능 구현을 통해 알아보면 더 쉽다. 버튼을 클릭하면 각 버튼에 맞는 박스가 보이는 기능을 구현해보자.

 

코드는 아래와 같다.

<template>
<div>
	<button @click="boxActive('box1Open')">박스1 오픈</button>
	<button @click="boxActive('box2Open')">박스2 오픈</button>
	<button @click="boxActive('box3Open')">박스3 오픈</button>
</div>

<div>
    <div v-if="boxStatus === 'box1Open'">박스1</div>
    <div v-else-if="boxStatus === 'box2Open'">박스2</div>
    <div v-else-if="boxStatus === 'box3open'">박스3</div>
</div>
</template>

<script>
export default {
  name: 'App',
	date() {
		return {
			//출력될 컨텐츠를 데이터로 저장
			boxStatus: 'box1Open',
		}
	},
    
    methods: {
    	boxActive(openBox) {
        	this.boxStatus = openBox;
        }
    }
}
</script>

위 코드 기준으로 하면 boxStatus 라는 데이터의 값이 'box1Open' 일때는 v-if 조건부 랜더링에 의해 최초 박스1이 보이는 것을 확인 할 수 있다.

 

그리고 탭버튼을 클릭함에 따라 boxStatus가 변경 될 수 있게 method를 작성해뒀고 탭버튼에 클릭 이벤트가 동작하면 박스가 바뀌는 것을 확인 할 수 있다.

 

이처럼 Vue.js의 조건부 랜더링 v-if,v-else-if를 활용하면 다양한 UI는 물론이고 조건부에 따라 화면에 표현 하고 싶은 것을 어렵지않게 표현 할 수 있다.