Vue에서는 조건에 따라 랜더링을 시킬수가 있는데 v-if와 v-show를 사용할 수 있습니다.
HTML 태그 안에 v-if="조건식"형태로 작성하며, 조건식이 참이라면 해당 블록이 랜더링되어 보여지는 형식으로 사용합니다.
1. v-if 사용하는 방법(1)
(1) 우선 data에 원하는 이름으로 불리언 형태의 값을 하나 지정해 줍니다.
<script>
export default {
name:"ModalPopup",
data(){
return{
popup: false
}
}
}
</script>(2) <template> 영역에 조건을 설정해줄 부분에 v-if='데이타명'형식으로 작성을 해주면 끝입니다.
<template>
<div v-if="popup">
<h2>제목</h2>
<p>날짜</p>
<p>어쩌구 저쩌구 컨텐츠</p>
</div>
</template>v-if="popup"이라고 해놓은것은 popup == true와 같습니다. true라면 해당 컴포넌트를 보여주고 false 일 경우엔 보여주지 않습니다.
아래쪽 data에 지정해 놓은 값을 true로 바꿔서 확인해보시면 됩니다.
이런식으로 꺼졌다 켜지는 창들은 @click 이벤트와 조합하여 특정 버튼을 클릭하면 이 값이 true로 바뀌게 하는 식으로 모달창 같은 효과를 구현할 수 있습니다.
2. v-if 사용하는 방법(2)
(1) data에 이번엔 불리언 값이 아닌 다른 값을 지정해 줍니다.
<script>
export default {
name:"ModalPopup",
data(){
return{
step: 0
}
}
}
</script>(2) 만드는 형식이야 자유로우니 전 그냥 아래와 같이 만들어봤습니다.
<template>
<nav class="nav">
<button @click="step = 0">STEP 0</button>
<button @click="step = 1">STEP 1</button>
<button @click="step = 2">STEP 2</button>
</nav>
<div>
<p v-if="step=='0'">1번 박스의 내용</p>
<p v-else-if="step=='1'">2번 박스의 내용</p>
<p v-else>3번 박스의 내용</p>
</div>
</template>버튼을 상단에 3개 배치하였고 각각의 버튼을 누르면 step이란 데이터값이 0 / 1 / 2 로 변하게 하였습니다.
아래쪽의 각 박스는 step이 0일때 보여지는것, step이 1일때 보여지는것, step이 2일때 보여지는 내용이 있습니다.
이거 잘 생각해보면 탭메뉴라던가 라우터의 역할 모두 하고있습니다.
그만큼 유용하니 필요에 따라 잘 사용하시면 좋을거 같습니다.
※ 본문에서는 이런 것도 있다는걸 적고싶어서 v-else-if와 v-else를 무리해서 적긴했는데 위와 같은경우엔 그냥 3개다 v-if로 해도 상관없는 부분입니다
v-else 같은 경우는 위의 if문이 작동하지 않을경우 보여지는 항목입니다. (JavaSciprt의 조건문과 동일합니다)
3. v-if와 v-show 차이점
우선 v-show도 v-if와 동일하게 사용합니다
<div v-show="post"> ... // <-- post가 true면 이 박스를 보여 준다는 의미
v-if와 v-show의 차이는 랜더링 방식입니다.
v-if 는 조건을 만족하면 없던 내용이 html에 생성되고, 조건에 만족하지 못하게 되면 실제로 html에서 해당 부분이 제거가 됩니다.
하지만 v-show의 경우 조건 여부에 상관없이 무조건 생성되며, 조건에 만족하지 못할경우 html에서 사라지는것이 아닌 css의 display 속성이 none으로 바뀌어 화면에서 사라지도록 처리가 됩니다.
즉, 화면 내에서 자주(혹은 많이) toggle이 일어난다면, v-show를 사용하는것이 좋고,
toggle의 빈도가 낮을 경우엔 v-if를 사용하는것이 좋습니다.