Vue/Vue.js 문법
Vue.js 문법 - 클래스와 스타일 바인딩
IT Blue
2021. 7. 13. 20:33
클래스 바인딩
<template>
<h1
:class="{ active: isActive }"
@click="activate">
Hello?!({{ isActive }})
</h1>
</template>
<script>
export default {
data() {
return {
isActive: false
}
},
methods: {
activate() {
this.isActive = true
}
}
}
</script>
<style scoped>
.active {
color: red;
font-weight: bold;
}
</style>
코드 이해하기
- <h1>태그 (Hello?!)를 클릭하면 isActive(기본값 false)가 true로 변경
- class 속성의 값(active)이 데이터이므로 v-bind: 디렉티브(약어)를 사용 :class="{ active: isActive }"
- { active: isActive }는 Key와 Value 형태, isActive는 (true, false)값을 가지고 있음
- active: true 라면 active 클래스를 추가, active: false 라면 클래스를 추가하지 않음
- 위의 개념이 클래스 바인딩(Class Binding)
인라인 스타일 바인딩
- :style의 객체 구문은 매우 간단
- JavaScript 객체라는 점을 제외하면 CSS와 거의 비슷
- CSS 속성 이름에는 카멜 케이스(camelCase) 또는 케밥 케이스(kebab-case, 케밥 케이스와 함께 따옴표 사용) 작성
<!-- App.vue -->
<!-- 객체 데이터에서 속성의 이름과 데이터의 이름이 동일하면 단축 가능하다-->
<!-- color: color => color -->
<!-- fontSize: fontSize => fontSize -->
<template>
<h1
:style="{
color: color,
fontSize: fontSize
}"
@click="changeStyle">
Hello?!
</h1>
</template>
<script>
export default {
data() {
return {
color: 'orange',
fontSize: '30px'
}
},
methods: {
changeStyle() {
this.color = 'red';
}
}
}
</script>
코드 이해하기
- :style="{ color: color, fontSize: fontSize }" 인라인 스타일 바인딩
- <h1>태그 (Hello?!)를 클릭하면, 메소드 changeStyle() 동작, 글자 색상이 red로 변경