잡다한 지식의 블로그
Vue.js에서 조건부 렌더링 본문
Vue.js에서 조건부 렌더링이란
- 조건에 따라 화면에 출력하는 것.
- 조건이 참(true)일 경우 화면에 출력되고, 거짓(false)일 경우 출력되지 않는다.
- v-if, v-else, v-else-if 등이 있다.
Vue.js에서 v-if
- 조건에 따라 블록을 출력하기 위해 사용되며, 참(ture) 값을 가질때만 출력한다.
Vue.js에서 v-else
- v-if에 대한 else블록을 나타낼 수 있다.
- v-if 또는 v-else-if 뒤에 있어야만 Vue가 인식이 가능하다.
Vue.js에서 v-else-if
- 2.1.0 버젼부터 새롭게 추가되었으며 v-if에 대하여 else if 역활을 한다.
- v-else와 마찬가지로 v-if 또는 v-else-if 뒤에 와야지만 Vue가 인식이 가능하다.
Vue.js에서 v-show
- 특정 조건을 만졸할 때 해당 부분을 출력하고, 만족하지 않으면 해당 부분을 출력하지 않는다.
- HTML의 display 속성을 변경.
Vue.js에서 v-if와 v-show의 차이점
- v-if는 조건이 맞지 않으면 아예 랜더링 하지않고, v-show는 HTML의 display 속성을 block 또는 none 처리 시킨다.
Vue.js에서 v-if 사용 예
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>V-if and V-else</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="show"> Yes </div>
<br>
<button @click="change">변경</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show : true
},
methods: {
change() {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
Vue.js에서 v-else 사용 예
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>V-if and V-else</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>
<br>
<button @click="change">변경</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show : true
},
methods: {
change() {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
Vue.js에서 v-else-if 사용 예
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>V-if and V-else</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">!</div>
<div v-else>out</div>
<button @click="change">변경</button>
</div>
<script>
new Vue({
el: '#app',
data: {
number : 1
},
methods: {
change() {
this.number++;
}
}
})
</script>
</body>
</html>
Vue.js에서 v-show 사용 예
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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">Yes</div>
<button @click="change">변경</button>
</div>
<script>
new Vue({
el: '#app',
data: {
show : false
},
methods: {
change() {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
'Vue.js' 카테고리의 다른 글
| Vue.js에서 멀티 인스턴스 사용하기 (0) | 2024.04.18 |
|---|---|
| Vue.js에서 v-for (0) | 2024.04.17 |
| Vue.js에서 Class와 Style 속성 Binding (0) | 2024.04.16 |
| Vue.js Watch 속성 (0) | 2024.04.15 |
| Vue.js Computed 속성 (0) | 2024.04.11 |
