5. 클래스와 스타일 바인딩(Class and Style Bindings)

클래스와 스타일 바인딩(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)에도 바인딩 할 수 있으며, 이것이 일반적이며 가장 강력한 방법이다.

//HTML
<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 에 참, 거짓 속성이 아닌 원하는 클래스명의 이름을 적어주면 그대로 렌더링 되어 결과로 나타남. 아래의 예제로 이해를 해보자

//HTML
<div v-bind:class="[activeClass, errorClass]"></div>

//JavaScript
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는 자동으로 해당 접두어를 감지해 스타일을 적용함