[Vue.js] Vue.js v-if
v-if
- 조건에 따른 HTML 태그 랜더링이 필요할 때 사용한다.
- 주어진 조건이 참일 경우에 랜더링을 수행하도록 명령 내릴 수 있으며 기존 프로그래밍 언어에서와 같이
v-if, v-else, v-else-if 분기가 가능하다.
v-else 는 사용한 v-if 바로 아래에 사용하면 한 쌍으로 동작한다. 이는 한 개의 v-if 아래에만 존재한다면 div<> 로 묶인 내부 태그들에 모두 적용된다.template 태그를 사용하면 v-if 가 설정된 태그를 랜더링하지 않을 수 있다- 분기 시에 동일한 태그는 랜더링하지 않는데, key 를 설정해 동일한 태그를 구분해 랜더링 시킬 수 있다.
v-if는 조건이 거짓일 때 랜더링을 하지 않는 반면 v-show는 일단 랜더링 하고 css display 속성을 제어한다. 조건이 거짓일 때는 display: none 속성이 지정된다.v-if는 v-show에 비해 랜더링 작업을 많이 해야한다. 따라서 v-show는 화면이 나타난 이후 자주 토글될 경우 많이 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
a1 : 100,
a2 : 200,
a3 : 100,
a4 : 100,
a5 : 100,
a6 : 100,
a7 : 100
},
methods : {
setA1 : function(){
if(this.a1 == 100) {
this.a1 = 200
} else {
this.a1 = 100
}
},
setA2 : function(){
if(this.a2 == 100) {
this.a2 = 200
} else {
this.a2 = 100
}
},
setA3 : function(){
if(this.a3 == 100) {
this.a3 = 200
} else {
this.a3 = 100
}
},
setA4 : function(){
if(this.a4 == 100) {
this.a4 = 200
} else {
this.a4 = 100
}
},
setA5 : function(){
if(this.a5 == 100) {
this.a5 = 200
} else if(this.a5 == 200) {
this.a5 = 300
} else {
this.a5 = 100
}
},
setA6 : function(){
if(this.a6 == 100) {
this.a6 = 200
} else {
this.a6 = 100
}
},
setA7 : function(){
if(this.a7 == 100){
this.a7 = 200
}else {
this.a7 = 100
}
}
}
})
}
</script>
</head>
<body>
<div id='test1'>
<h3 v-if='a1 == 100'>a1은 100입니다</h3>
<h3 v-if='a1 == 200'>a1은 100이 아닙니다</h3>
<button type='button' @click='setA1'>버튼</button>
<hr/>
<h3 v-if='a2==100'>a2는 100입니다</h3>
<h3 v-else>a2는 100이 아닙니다</h3>
<button type='button' @click='setA2'>버튼</button>
<hr/>
<div v-if='a3 == 100'>
<h3>a3는 100입니다</h3>
<h3>a3는 100입니다</h3>
<h3>a3는 100입니다</h3>
</div>
<div v-else>
<h3>a3는 100이 아닙니다</h3>
<h3>a3는 100이 아닙니다</h3>
<h3>a3는 100이 아닙니다</h3>
</div>
<button type='button' @click='setA3'>버튼</button>
<hr/>
<template v-if='a4 == 100'>
<h3>a4는 100입니다</h3>
<h3>a4는 100입니다</h3>
<h3>a4는 100입니다</h3>
</template>
<template v-else>
<h3>a4는 100이 아닙니다</h3>
<h3>a4는 100이 아닙니다</h3>
<h3>a4는 100이 아닙니다</h3>
</template>
<button type='button' @click='setA4'>버튼</button>
<hr/>
<template v-if='a5 == 100'>
<h3>a5는 100입니다</h3>
</template>
<template v-else-if='a5==200'>
<h3>a5는 200입니다</h3>
</template>
<template v-else>
<h3>a5는 100도 200도 아닙니다</h3>
</template>
<button type='button' @click='setA5'>버튼</button>
<hr/>
<template v-if='a6 == 100'>
<h3>data1</h3>
<input type='text' key='data1'/>
</template>
<template v-else>
<h3>data2</h3>
<input type='text' key='data2'/>
</template>
<button type='button' @click='setA6'>a6 셋팅</button>
<hr/>
<h3 v-show='a7 == 100'>a7은 100입니다</h3>
<h3 v-show='a7 != 100'>a7은 100이 아닙니다</h3>
<button type='button' @click='setA7'>버튼</button>
</div>
</body>
</html>
Leave a comment