안녕하세요. 혀코입니다.
이번 시간에는 Vue에서 조건문 v-if 사용하는 방법에 대해서 알아보겠습니다.
지난 시간 Vue를 활용해서 Counter 프로그램을 만들어 봤습니다. 만약 Counter 숫자가 7보다 클 경우에 Vue 조건문 v-if를 사용해서 특정 메세지가 보여지도록 업데이트 해보겠습니다.
다음 코드는 지난 시간 작성했던 Counter 프로그램 입니다.
<template>
<h1 @click="increase">{{ count }}</h1>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increase() {
this.count += 1
}
}
}
</script>
Vue 조건문 v-if 을 사용해서 특정 메세지가 보여지도록 업데이트 해보겠습니다.
<template>
<h1 @click="increase">{{ count }}</h1>
<p v-if="count > 7">Count가 7보다 큽니다.</p>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increase() {
this.count += 1
}
}
}
</script>
Count가 7보다 작거나 같을 경우에는 메시지가 안보여지는 것을 확인할 수 있습니다.
Count가 8일 경우 7보다 크기 때문에 특정 메시지가 보여지는 것을 확인할 수 있습니다.
이번에는 v-else와 같이 사용해 보겠습니다.
<template>
<h1>Counter with v-if and v-else</h1>
<p v-if="count < 7">{{ count }}</p>
<p v-else>Number is not less than 7 ({{ count }})</p>
<button @click="add">ADD</button>
<button @click="reset">RESET</button>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
add() {
return this.count += 1
},
reset() {
return this.count = 0
}
}
}
</script>
count가 7보다 작을 때는 숫자가 커지다가 count가 7과 같거나 커지면 7보다 작지 않다는 문구가 출력됩니다.
여기서 한가지 조건문을 추가할 때는 v-else-if 를 추가하면 됩니다.
<template>
<h1>Counter with v-if and v-else</h1>
<p v-if="count < 3">{{ count }}</p>
<p v-else-if="count < 7">Number is not less than 3 ({{ count }})</p>
<p v-else>Number is not less than 7 ({{ count }})</p>
<button @click="add">ADD</button>
<button @click="reset">RESET</button>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
add() {
return this.count += 1
},
reset() {
return this.count = 0
}
}
}
</script>
여기서는 count 가 3보다 커지면, 3보다 작지 않다고 메시지가 출력되고, 7보다 커지면, 7보다 작지 않다고 메시지가 출력됩니다.
한가지 팁을 추가하자면, 여러개의 태그를 v-if 조건문에 따라 보여지거나 사라지도록 할때, <div>태그를 wrapper로 사용하기 보다는 새로운 <template> 태그를 사용해 여러개의 태그를 감싸고 v-if 조건문을 달아주면, wrapper로 사용된 <template> 태그는 렌더링 되지 않는 이점이 있습니다.
<template>
<h1>Counter with v-if and v-else</h1>
<button @click="show">show</button>
<template v-if="isActive">
<p>paragraph1</p>
<p>paragraph2</p>
</template>
</template>
<script>
export default {
data() {
return {
isActive: false
}
},
methods: {
show() {
this.isActive = !this.isActive
}
}
}
</script>
여기서 주의할 것은 최상의 <template> 태그에는 v-if 조건문이 적용 안됩니다.
이렇게 Vue에서 조건문 v-if를 사용하는 방법에 대해서 알아봤습니다.
해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글