안녕하세요. 혀코입니다.
이번 시간에는 Vue에서 class attribute를 다루는 방법에 대해서 알아보겠습니다.
이전에 v-bind로 attribute를 다루면서 아래와 같이 class를 변경하는 방법에 대해서 알아봤습니다.
<template>
<h1>Class Attribute</h1>
<p v-bind:class="classAttr">{{ message }}</p>
<button @click="change">Change</button>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!',
classAttr: 'txt-green'
}
},
methods: {
change() {
this.message= 'Smile World',
this.classAttr = 'txt-red'
}
}
}
</script>
<style scoped>
.txt-green {
color: green;
}
.txt-red {
color: red;
}
</style>
Change 버튼을 클릭하면, class 가 변경되면서 글자 색상이 녹색에서 빨간색으로 변경됩니다.
class 값으로 true, false 값을 가지는 객체 데이터 값을 넣어주면 더욱 활용도가 높아집니다.
<template>
<h1>Class Attribute</h1>
<p v-bind:class="{active: isActive}">{{ message }} ({{isActive}})</p>
<button @click="change">Change</button>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!',
isActive: false
}
},
methods: {
change() {
this.message = 'Smile World',
this.isActive = true
}
}
}
</script>
<style scoped>
.active {
color: blue;
font-weight: bold;
}
</style>
여기서 isActive 값이 true 일때만, active class가 적용되어 Change 버튼을 눌렀을때 텍스트 색상에 파란색으로, 폰트 굵기가 두껍게 변경되는 것을 확인하실 수 있습니다.
또한 객체 데이터를 사용하기 때문에 두개 이상의 데이터를 다룰 수 있습니다.
<template>
<h1>Class Attribute</h1>
<p v-bind:class="{active: isActive, error: hasError}">{{ message }} ({{isActive}})</p>
<button @click="change">Change</button>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!',
isActive: false,
hasError: false
}
},
methods: {
change() {
this.message = 'Smile World',
this.isActive = true,
this.hasError = true
}
}
}
</script>
<style scoped>
.active {
color: blue;
font-weight: bold;
}
.error {
color: red;
font-weight: bold;
}
</style>
그리고 class attribute 를 binding 할 때는 기존의 class 태그와 같이 사용할 수 있습니다.
<template>
<h1>Class Attribute</h1>
<p class="description" v-bind:class="{active: isActive, error: hasError}">{{ message }} ({{isActive}})</p>
<button @click="change">Change</button>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!',
isActive: false,
hasError: false
}
},
methods: {
change() {
this.message = 'Smile World',
this.isActive = true,
this.hasError = true
}
}
}
</script>
<style scoped>
.description {
font-style: italic
}
.active {
color: blue;
font-weight: bold;
}
.error {
color: red;
font-weight: bold;
}
</style>
이 때, Change 버튼을 클릭하고 Chrome Dev Tool을 확인해 보면, class에 description, active, error 이렇게 3개의 class가 있는 것을 확인할 수 있습니다.
그리고 위 코드에서는 class 값으로 객체가 인라인 형태로 사용되었는데 이것을 JavaScript 데이터로 제공하여 사용할 수도 있습니다.
<template>
<h1>Class Attribute</h1>
<p class="description" v-bind:class="classObject">{{ message }} ({{isActive}})</p>
<button @click="change">Change</button>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!',
classObject: {
active: false,
error: false
}
}
},
methods: {
change() {
this.message = 'Smile World',
this.classObject = {
active: true,
error: true
}
}
}
}
</script>
<style scoped>
.description {
font-style: italic
}
.active {
color: blue;
font-weight: bold;
}
.error {
color: red;
font-weight: bold;
}
</style>
class attribute로 classObject 객체명을 지정하고 script에서 classObject의 값을 정의했습니다.
뿐만 아니라 배열 형태로도 class attribute를 사용할 수 있습니다.
<template>
<h1>Class Attribute</h1>
<p class="description" v-bind:class="[activeClass, errorClass]">{{ message }} ({{isActive}})</p>
<button @click="change">Change</button>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!',
activeClass: 'active',
errorClass: 'txt-danger txt-bold'
}
},
methods: {
change() {
this.message = 'Smile World'
}
}
}
</script>
<style scoped>
.description {
font-style: italic
}
.active {
color: blue;
}
.txt-danger {
color: red;
}
.txt-bold {
font-weight: bold;
}
</style>
렌더링된 class attribute 값은 description active txt-danger txt-bold 이렇게 됩니다.
그리고 삼항 연산자를 사용해서 class attribute를 인라인에서 제어할 수도 있습니다.
<template>
<h1>Class Attribute</h1>
<p class="description" v-bind:class="[isActive ? activeClass : '', hasError ? errorClass : '']">{{ message }} ({{isActive}})</p>
<button @click="change">Change</button>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!',
isActive: false,
hasError: false,
activeClass: 'active',
errorClass: 'txt-danger txt-bold'
}
},
methods: {
change() {
this.message = 'Smile World',
this.isActive = true,
this.hasError = true
}
}
}
</script>
<style scoped>
.description {
font-style: italic
}
.active {
color: blue;
}
.txt-danger {
color: red;
}
.txt-bold {
font-weight: bold;
}
</style>
이때, isActive 값이 true이면, activeClass의 값을 추가해주고, hasError 값이 true이면, errorClass의 값을 추가해줍니다.
이렇게 Vue에서 class attribute를 다루는 방법에 대해서 알아봤습니다.
해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글