클래스와 스타일 바인딩(Class and Style Bindings)
데이터 바인딩은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용되며 v-bind 로 처리함
HTML 클래스 바인딩하기(HTML Class Bindings)
객체 구문
클래스를 동적으로 토글하기 위해 v-bind:class 에 객체 전달
<div class="static" v-bind:class="{ active : isActive }"></div>
data: {
isActive: true
}
위의 코드에서 볼수있다시피 일반 class 속성과 v-bind:class 를 같이 쓸수 있으며
이때 data는 참 속성으로 active에 렌더링되어 아래와 같은 코드가 된다
<div class="static active"></div>
객체를 반환하는 계산된 속성(computed)에도 바인딩 할 수 있으며, 이것이 일반적이며 가장 강력한 방법이다.
<div v-bind:class="classObject"></div>
//JavaScript
data: {
isActive: true,
error: null
},
computed: {
classObject: function() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
위의 예제 코드에서 computed > classObject의 함수 안에서 계산 후 반환값으로 active 와 ‘text-danger’ 값을 정하고 HTML의 v-bind:class 에 전해주면 렌더링되어 원하는 결과를 얻을 수 있다.
배열 구문
v-bind:class=”[ ]” 와같이 배열로 담을 수 잇고 이때는 data 에 참, 거짓 속성이 아닌 원하는 클래스명의 이름을 적어주면 그대로 렌더링 되어 결과로 나타남. 아래의 예제로 이해를 해보자
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
<div class="active text-danger"></div>
또한 조건부 토글도 가능하며 이는 삼항 연산자를 사용함
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
<div v-bind:class="[isActive && activeClass, errorClass]">
<div v-bind:class="[{ active: isActive }, errorClass]">
이런식으로도 줄여서 작성이 가능하다고 함
위에서 isActive 가 참이면 active 클래스가 적용되고, 거짓이면 error 클래스가 적용됨
컴포넌트(Component)와 함께 사용하는 방법
-컴포넌트란?
기본 HTML 엘리먼트를 확장해 재사용 가능한 코드를 캡슐화 하는데 사용
컴포넌트를 어떤식으로 생성을 하나보면
Vue.component('my-component', {
template: '<p class="foo var">Hi</p>'
})
이렇게 컴포넌트를 정의를 하면 HTML에서 작성할 수 있음
<my-component class="baz boo"></my-component>
위와 같이 작성을 하면 렌더링 되어 아래 코드로 나타남
<p class="foo bar baz boo">Hi</p>
클래스 바인딩도 동일함
<my-component v-bind:class=" { active: isActive }"></my-component>
여기서 isActive 가 참일 때 렌더링 된 HTML은 아래 코드와 같다
<p class="foo bar active">Hi</p>
인라인 스타일 바인딩
객체 구문
v-bind:style 객체 구문은 CSS 처럼 보이지만 JavaScript 객체이다
속성 이름에는 camelCase와 kebab-case를 사용해야함
camelCase는 들어봤는데 kebab-case는 처음 들어봐서 검색을 해봄
-camelCase에서 대문자 대신에 소문자로 고치고 - 를 붙인다
camelCase => ‘camel-case’
이때 kebab-case를 사용하려면 따옴표를 함께 사용해야 함
<div v-bind:style=" { color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
배열 구문
v-bind:style 에 대한 배열 구문은 같은 스타일의 엘리먼트에 여러 개의 스타일 객체를 사용 할 수 있음
<div v-bind:style="[baseStyles, overridingStyles]">
자동 접두사
v-bind:style 에 브라우저 벤더 접두어(ex: -webkit-, -moz- 등등)가 필요한 CSS 속성을 사용하면 Vue는 자동으로 해당 접두어를 감지해 스타일을 적용함
