v-if
조건에 따라 블록을 렌더링하기 위해 사용하며, 표현식이 true값을 반환할 때만 렌더링됨
- template를 사용하여 조건부 그룹을 만들 수 있음
- v-else 를 통해서 "else 블록"을 나타낼 수도 있음. v-else 는 항상 v-if 난 v-else-if 뒤에 와야함
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if, v-show 예제</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<template v-if="number === 1">
<div>1</div>
<div>2</div>
<div>3</div>
</template>
<div v-else-if="number === 2">Hi</div>
<div v-else>No</div>
<button @click="increaseNum">increaseNum</button> {{ number }}
</div>
<script>
new Vue({
el: "#app",
data: {
number: 1
},
methods: {
increaseNum() {
this.number++;
}
}
})
</script>
</body>
</html>
- Button 클릭이벤트를 통해, increaseNum 메소드 실행으로 number데이터가 1씩 증가하도록 하였음
- number의 값이 1이면 temlplate 내 div태그를 보여주고, 2이면 "HI"를, 둘 다 false라면 "No"를 보여줌
v-show
조건부로 표시하기 위한 또 다른 옵션. v-if와 사용법은 거의 동일
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if, v-show 예제</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="show">Yes</div>
<button @click="toggle">toggle</button>
</div>
<script>
new Vue({
el: "#app",
data: {
show: false
},
methods: {
toggle() {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
- Button 클릭이벤트를 통해, toggle 메소드 실행으로 현재 show값을 반전시킴 (true 또는 false)
- show값이 true이면 화면에 "Yes" 표시
v-if와 v-show의 차이점
가장 큰 차이점은 v-if는 조건에 따라 DOM에서 실제로 제거되며 생성됨
반면에, v-show는 false여도 엘리먼트가 DOM에서 사라지지 않는 것
단순히 style 속성을 이용하여 display 값만 제어하여 숨김
지극히 개인적인 내 개발스터디 공간