Vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공한다.
표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있다.
HTML 클래스 바인딩하기
# 객체 구문
클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있다.
<div v-bind:class="{ active: isActive }"></div>
위 구문은 active 클래스의 존재 여부가 데이터 속성 isActive 의 참 속성에 의해 결정되는 것을 의미.
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div>
data: {
isActive: true,
hasError: false
}
아래와 같이 렌더링된다.
<div class="static active"></div>
바인딩 된 객체는 인라인 일 필요는 없다.
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
객체를 반환하는 계산된 속성에도 바인딩 할 수 있다.
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
# 배열 구문
배열을 v-bind:class 에 전달하여 클래스 목록을 지정할 수 있다.
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
아래와 같이 랜더링된다.
<div class="active text-danger"></div>
목록에 있는 클래스를 조건부 토글하려면 삼항 연산자를 이용할 수 있다.
그러나 여러 조건부 클래스가 있는 경우 장황해질 수 있다. 그래서 배열 구문 내에서 객체 구문을 사용할 수 있다.
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
# 컴포넌트와 함께 사용하는 방법
사용자 정의 컴포넌트로 class 속성을 사용하면, 클래스가 컴포넌트의 루트 엘리먼트에 추가 된다. 이 엘리먼트는 기존 클래스는 덮어쓰지 않는다.
컴포넌트 선언 :
// ...
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
// ...
사용할 클래스 일부 선언 :
<my-component class="baz boo"></my-component>
랜더링 된 HTML :
<p class="foo bar baz boo">Hi</p>
클래스 바인딩도 동일
<my-component v-bind:class="{ active: isActive }"></my-component>
인라인 스타일 바인딩
# 객체 구문
v-bind:style 객체 구문은 매우 직설적. 거의 CSS 처럼 보이지만 JavaScript 객체.
속성 이름에 camelCase와 kebab-case (따옴표를 함께 사용해야 한다)를 사용할 수 있다.
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
스타일 객체에 직접 바인딩 하여 템플릿이 더 간결하도록 만드는 것이 좋다.
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
# 배열 구문
v-bind:style에 대한 배열 구문은 같은 스타일의 엘리먼트에 여러 개의 스타일 객체를 사용할 수 있게 한다.
# 자동 접두사
v-bind:style 에 브라우저 벤더 접두어가 필요한 CSS 속성 (예: transform)을 사용하면 Vue는 자동으로 해당 접두어를 감지하여 스타일을 적용한다
# 다중값 제공
2.3버전 부터 스타일 속성에 접두사가 있는 여러 값을 배열로 전달할 수 있다.
관련 예제
코드 :
<body>
<div id="app">
<!-- click 시 attachRed true/false 변경 -->
<!-- :class로 object를 바인딩-->
<div
class="demo"
@click="attachRed = !attachRed"
:class="{red: attachRed, green: !attachRed}"
class="demo"
>
1
</div>
<!--클래스 바인딩 과 스타일 바인딩-->
<div class="demo" :class="color" :style="{height: myHeight}">2</div>
<div class="demo" :class="divClasses">3</div>
<!--input에 쓴 글씨에 따라서 색깔이 바뀐다.-->
<div>2번 상자의 색: <input type="text" v-model="color" /></div>
</div>
<script>
new Vue({
el: "#app",
data: {
attachRed: false,
color: "green"
},
computed: {
divClasses: function() {
return {
red: this.attachRed,
green: !this.attachRed
};
},
//attachRed가 true면 50px로 보여주고, false면 200px로 적용된다.
myHeight: function() {
return this.attachRed ? "50px" : "200px";
}
}
});
</script>
</body>
<style>
.demo {
width: 100px;
height: 100px;
background-color: grey;
display: inline-block;
margin: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
</style>
결과:
Reference : https://medium.com/@hozacho/맨땅에vuejs-클래스와-스타일-바인딩-3579817f1dc1
