Vue.js 클래스와 스타일 바인딩

클래스와 스타일 바인딩

데이터 바인딩은 v-bind를 사용하여 엘리먼트의 클래스 목록과 인라인 스타일을 조작하기 위해 사용됩니다. vue는 class와 style에 v-bind를 사용할 때 특별히 향상된 기능을 제공하며 표현식은 문자열 이외에 객체 또는 배열을 이용할 수 있습니다.

HTML 클래스 바인딩하기

객체 구문

클래스를 동적으로 토글하기 위해 v-bind:class에 객체를 전달할 수 있습니다.

이런식으로 작성하게 되면 active 클래스의 존재 여부가 데이터 속성 isActive의 참속성에 의해 결정되는 것을 의미합니다.

객체에 필드가 더 있으면 여러 클래스를 토글 할 수 있습니다. 또한 v-bind:class는 일반 class 속성과 공존할 수 있습니다.

 <div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
  ></div>

따라서 위와 같이 클래스를 여러개 둘 수도 있으며 이 경우에 데이터는

 data: {
  isActive: true,
  hasError: false
}


<div class="static active"></div>

이와 같이 랜더링 됩니다.

즉 데이터 값이 false인 경우 dom에서는 해당 클래스가 나타나지 않으며 true인 경우에만 class로 랜더링되게 됩니다.

또한 바인딩 된 객체는 인라인으로 html안에 들어가지 않더라도 다음과 같이 하나의 객체로 한번에 들어갈 수 있습니다.

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

또한 computed 속성도 바인딩이 가능합니다.

따라서 이를 이용하면 데이터와 바인드 한 것을 이용하여 클래스자체를 객체로 만들고 computed와 여러 클래스를 상황에 맞게 바꿔가며 작동하게 할 수 있습니다.

배열 구문

우리는 배열을 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="[isActive ? activeClass : '', errorClass]"></div>

이 경우 항상 errorClass를 적용하고 isActive 가 true 일 때만 activeClass를 적용합니다.

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

인라인 스타일 바인딩

v-bind : style 객체 구문
CSS처럼 보이지만 자바스크립트 객체

    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

    data: {
      activeColor: 'red',
      fontSize: 30
    }

다음과 같이 style Object 객체로 만든 후 적용시킬 수도 있다.

    <div v-bind:style="styleObject"></div>
      data: {
        styleObject: {
          color: 'red',
          fontSize: '13px'
        }
      }

바인딩 해서 다음과 같이 css를 적용시켜 보았습니다.

배열 구문

<div v-bind:style="[baseStyles, overridingStyles]"></div>

다음과 같이 :style을 넣게 되면 같은 스타일의 엘리먼트에 여러개의 스타일 객체를 사용하게 할 수 있습니다.

다중 값 제공

<div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

정리하자면 다음과 같다.

1. HTML클래스를 data 부분을 정의하여 바인딩 시키면 class를 바인딩 시켜서 바꿀 수 있다.
2. 컴포넌트에서도 이것이 가능하다. < 컴포넌트 class = "추가하고자 하는 클래스"> </컴포넌트>이런식으로 작성하면 된다. :class를 해서 바인딩해도 동일하다.
3. 인라인 스타일도 바인딩 시킬 수 있는데 이때 데이터 안에 스타일 객체를 만들고 거기에 style 요소들을 적은 후 객체를 바인딩 하면 간결하게 코드가 작성된다.
4. 스타일을 바인딩 시킬때 배열 및 다중값으로 받아와서 여러 스타일을 적용시킬 수도 있다.