1/ 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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<template v-if="show"> <!--한꺼번에 v-if를 적용하고싶으면 template태그 사용-->
<div>1</div>
<div>2</div>
<div>3</div>
</template>
<div v-else-if="show"> <!--v-if안에 true가 들어가면 div태그가 랜더링이 되고, false면 랜더링x.-->
Yes
</div>
<div v-else>No</div>
<button @click="toggleShow">Toggle</button>
<template v-if="number === 1"> <!--true면 랜더링o-->
<div>1</div>
<div>2</div>
<div>3</div>
</template>
<div v-else-if="number === 2">Hi</div>
<div v-else>No</div>
<br>
<button @click="increseNumber">Increase</button> {{ number }}
</div>
<script>
new Vue({
el: '#app',
data: {
show: false,
number: 1,
},
methods: {
toggleShow: function(){
this.show = !this.show;
},
increseNumber(){
this.number++;
},
},
computed: {
},
watch: {
}
})
</script>
</body>
</html>
2/ v-show
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-show="show">Yes</div> <!--v-show는 false여도 랜더링o. But 안보이도록 display:none-->
<br>
<button @click="toggle">Toggle</button>
<!--v-if:토글하면서 계속 랜더링을 해줘야하기때문에 토글 비용이 높다. v-show:초기 랜더링할때 무조건 다 보여줘야하기때문에 초기 랜더링 비용 높다.-->
<!--자주 바꿀경우에는 v-show가 더 좋다.-->
</div>
<script>
new Vue({
el: '#app',
data: {
show: false,
number: 1,
},
methods: {
toggleShow: function(){
this.show = !this.show;
},
increseNumber(){
this.number++;
},
toggle(){
this.show=!this.show;
}
},
computed: {
},
watch: {
}
})
</script>
</body>
</html>
v-if와 v-show의 차이점
v-if는 값이 false일 경우에는 아예 랜더링 x.
But, v-show는 값이 false여도 랜더링o. 대신, display:none이다.
'Vue.js' 카테고리의 다른 글
| Kossie Coder 15. 싱글 파일 컴포넌트 (0) | 2022.10.09 |
|---|---|
| Kossie Coder 10. v-for 리스트 렌더링 (0) | 2022.09.24 |
| Kossie Coder 08. 클래스 & 스타일 바인딩 (0) | 2022.05.16 |
| Kossie Coder 07. Watch 속성 (0) | 2022.05.15 |
| Kossie Coder 06. Computed 속성 (0) | 2022.05.15 |
