데이터 바인딩(Data Binding)
데이터 바인딩은 일반적으로 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용된다.
v-bind 디렉티브 값으로 들어가는 표현식은 문자열 외에도 객체 또는 배열을 사용할 수 있다.
클래스 지정
클래스를 동적으로 토글 하기 위해 v-bind:class에 객체를 전달할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.warning {
color: red;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:class="{ warning: isError }">Error</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isError: false
}
});
</script>
</body>
</html><p> 태그에 v-bind 디렉티브를 사용했다. v-bind:class 값에 {warning: isError}라는 객체 값을 담는다.
만약 isError가 true인 경우 <p> 태그에 warning이라는 클래스가 지정될 것이다.
현재는 false로 설정해놓았기 때문에 단순 <p>Error</p>로만 출력될 것이다.
Vue.js Devtools를 사용해서 isError 값을 true와 false로 번갈아 변경해본다.
isError가 true로 변경되면 <p> 태그에 warning이라는 클래스가 지정되기 때문에 문자열이 빨간색으로 변한다.
클래스 여러 개 지정 (multiple)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#id-num {
font-weight: bold;
font-style: italic;
}
.text-blue {
color: blue;
}
.size-up {
font-size: 24px;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:id="uid" v-bind:class="classObj">홍길동</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
uid: "id-num",
classObj: {
"text-blue": true,
"size-up": true
}
}
});
</script>
</body>
</html>클래스를 여러 개 지정하기 위해서는 객체를 사용하거나, 배열을 사용하면 된다.
classObj라는 객체 안에 담긴 key 값의 value가 true인 경우, 해당 key 값을 class로 지정한다.
만약 "size-up"을 false로 설정한다면 font-zize: 24px;가 되지 않을 것이다.
<!-- 객체 사용 -->
<p v-bind:id="uid" v-bind:class="classObj">홍길동</p>
<!-- 배열 사용 -->
<p v-bind:id="uid" v-bind:class="['text-blue', 'size-up']">홍길동</p>Vue.js 2.3.0 버전 이후부터는 배열을 사용해서 여러 개의 클래스 값을 지정할 수 있다.
위 객체를 사용하여 두 개의 클래스를 지정한 것과, 아래 배열을 사용하여 두 개의 클래스 지정한 것 모두 같은 뜻이다.
참고
https://v2.vuejs.org/v2/guide/class-and-style.html
Class and Style Bindings — Vue.js
Vue.js - The Progressive JavaScript Framework
v2.vuejs.org
