비즈니스 로직에 의한 화면 노출 변화가 필요할 때, HTML 요소에 클래스를 붙이거나 떼어야 할 필요가 있습니다. 이럴때 Vue의 클래스 바인딩을 사용할 수 있습니다.
v-bind:class
<template>
<!-- class와 :class가 공존하는 예시 -->
<!-- 특수문자가 포함된 text-danger 클래스는 sigle quote 붙여서 아래와 같이 작성 가능 -->
<div class="text" :class="{ active: isActive, 'text-danger': hasError }">
텍스트입니다.
</div>
<button v-on:click="toggle">텍스트 토글</button>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const isActive = ref(true)
const hasError = ref(false)
const toggle = () => {
isActive.value = !isActive.value
hasError.value = !hasError.value
}
return {
isActive,
toggle,
hasError,
}
},
}
</script>
<style>
.active {
font-weight: 900;
}
.text-danger {
color: red;
}
</style>:class 바인딩을 이용하여 active 클래스와 text-danger 클래스를 선택적으로 부여하는 예시 코드입니다. 코드에서 확인 가능하듯 class와 :class를 동시에 사용할 수 있고 클래스에 특수 문자가 포함된 경우 ''로 감싸게 됩니다.
만약에 바인딩할 클래스가 많다면, 아래와 같이 object로 전달 가능합니다.
<template>
<!-- classObject로 객체를 한 번에 전달 -->
<div class="text" :class="classObject">텍스트입니다.</div>
</template>
<script>
import { reactive } from 'vue'
export default {
setup() {
const classObject = reactive({
active: true,
'text-danger': false,
})
return {
classObject,
}
},
}
</script>
<style>
.active {
font-weight: 900;
}
.text-danger {
color: red;
}
</style>computed를 이용해 복잡한 로직 분리
기존에 배웠던 computed api를 이용해 클래스의 활성화 여부를 캐싱하여, 좀 더 가독성있게 구현이 가능합니다.
const classObject = computed(() => {
return {
active: true && true,
'text-danger': false,
}
})실무에서는 아래와 같이 간단히 배열로 표현하는 방식도 많이 사용한다고 합니다.
<template>
<!-- classObject로 객체를 한 번에 전달 -->
<div class="text" :class="[activeClass, errorClass]">텍스트입니다.</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const activeClass = ref('active')
const errorClass = ref('error')
return { activeClass, errorClass }
},
}
</script>
<style></style>