Vue.js 간단정리 #6 클래스, 스타일 바인딩
Intro
https://www.vuemastery.com/courses/intro-to-vue-js 에 정리된 공식 Vue 무료 강의에 있는 내용을 짧게 정리해보려 한다.
기본 사용법
클래스나 스타일을 바인딩할 때도 다른 바인딩과 똑같이 : 기호를 이용하면 된다.
:style, :class와 같이 바인딩할 수 있다.
이를테면 아래와 같이 사용하면 된다.
<div :class="{fontSize: '10px'}">10px 크기의 폰트</div>헷갈리기 쉬운 점
헷갈리기 쉬운 점은 바인딩 내부에 기존 css와 같이 코딩하면 안된다.
이를테면, 글씨 크기를 조정하고 싶을 때 기본 css 포맷으로는 font-size: 10px등과 같은 용법이 쓰이겠지만,
바인딩 시에는 내부적으로 자바스크립트 오브젝트를 줘야 한다.
예제를 보면 쉽게 이해할 수 있는데, 아래와 같다.
<div :class="{fontSize: '10px'}">10px 크기의 폰트</div>위와 같이 Snake Case에서 Camel Case로 적어주어야 한다.
만일, 바인딩 속성 내부에 Snake Case를 이용하고 싶다면,
<div :class="{'font-size': '10px'}">10px 크기의 폰트</div>위와 같은 방식처럼, 따옴표를 씌워주면 된다.
다양한 용례
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>TEST!!</title>
<style>
.dark-theme {
color: white;
background-color: black;
}
</style>
</head>
<body>
<div id="app">
<div :class="classObject">테스트</div>
<div :class="{'dark-theme': darkTheme}">테스트2</div>
<div :class="[darkTheme ? 'dark-theme' : '']">테스트3</div>
<div :style="{color: color, 'font-size': fontSize}">테스트용 글씨입니다.</div>
<div :style="[styleObject, styleObject2]">적용 가능한 색상 목록</div>
<ol>
<li v-for="color in colors" :style="{color:color}" @mouseover="changeFontColor(color)">
{{color}}
</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
colors: ['red', 'blue', 'green'],
color: 'red',
fontSize: '20px',
styleObject: {
'font-size': '15px',
color: 'gray',
},
styleObject2: {
'margin-bottom': '10px',
},
darkTheme: true,
classObject: {
'dark-theme': true,
},
},
methods: {
changeFontColor(color) {
this.color = color;
},
},
});
</script>
</body>
</html>위의 예제는 나올 수 있는 용례들을 테스트한 html 파일이다.
기존에 조건부로 스타일이나 클래스를 지정할 때, jquery를 이용하면 꽤나 귀찮은 점이 많았는데
vue.js를 이용하면 편리한 점이 많다.
Object 내부에 Key값으로 스타일 이름을 적고 Value에 True, False등을 줌으로써 스타일 적용 여부를 쉽게 설정할 수 있다.
풀스택 웹개발자로 일하고 있는 Jake Seo입니다. 주로 Jake Seo라는 닉네임을 많이 씁니다. 프론트엔드: Javascript, React 백엔드: Spring Framework에 관심이 있습니다.