09 v-if 와 v-show
v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용
v-if 디렉티브의 표현식이 true 값을 반환할 때만 렌더링
V-if
<!DOCTYPE html>
<html lang="ko">
<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</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="show">Yes</div>
<button @click="updateToggle">버튼</button>
</div>
<script>
new Vue({
el:'#app',
data:{
show: true,
},
methods: {
updateToggle(){
this.show = !this.show
}
},
})
</script>
</body>
</html>결과화면
v-else
<!DOCTYPE html>
<html lang="ko">
<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</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="show">Yes</div>
<div v-else>No</div>
<button @click="updateToggle">버튼</button>
</div>
<script>
new Vue({
el:'#app',
data:{
show: true,
},
methods: {
updateToggle(){
this.show = !this.show
}
},
})
</script>
</body>
</html>
여러 개의 엘리먼트에 v-if를 적용하고 싶으면 <template> 에 내용을 추가하면 됨
<!DOCTYPE html>
<html lang="ko">
<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</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<template v-if="show">
<div>111111</div>
<div>222222</div>
<div>333333</div>
</template>
<div v-else>No</div>
<button @click="updateToggle">버튼</button>
</div>
<script>
new Vue({
el:'#app',
data:{
show: true,
},
methods: {
updateToggle(){
this.show = !this.show
}
},
})
</script>
</body>
</html>결과화면
v-else-if
v-else와 마찬가지로, v-else-if 엘리먼트는 v-if 또는 v-else-if 엘리먼트 바로 뒤에 와야 합니다.
<!DOCTYPE html>
<html lang="ko">
<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</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>숫자: {{number}}</p>
<template v-if="number === 1">
<div>111111</div>
<div>222222</div>
<div>333333</div>
</template>
<div v-else-if="number === 2">aaaaa</div>
<div v-else>No</div>
<button @click="updateNumber">증가 버튼</button>
<button @click="updateToggle">버튼</button>
</div>
<script>
new Vue({
el:'#app',
data:{
show: true,
number: 1,
},
methods: {
updateToggle(){
this.show = !this.show
},
updateNumber(){
this.number++;
}
},
})
</script>
</body>
</html>결과화면
v-show
v-show 는 항상 렌더링 되고 DOM에 남아있음
단순히 엘리먼트에 CSS display 속성을 토글하는 것
<!DOCTYPE html>
<html lang="ko">
<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-show</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="show">보여준다</div>
<button @click="updateToggle">버튼</button>
</div>
<script>
new Vue({
el:'#app',
data:{
number:1,
show:false
},
methods: {
updateToggle(){
this.show = !this.show;
}
},
})
</script>
</body>
</html>결과화면
Hello!