[가이드] 클래스와 스타일 바인딩 - 필수요소 | Vue

 

일반적으로 데이터 바인딩은 요소의 클래스 목록과 인라인 스타일을 조작해야 합니다. 둘 다 속성이기 때문에 v-bind를 사용하여 처리할 수 있습니다. 즉, 표현식을 사용하여 최종 문자열만 계산하면 됩니다. 하지만 문자열 연결에 간섭하는 것은 짜증나고 오류가 발생하기 쉽습니다. 이러한 이유로 Vue는 v-bind를 class 및 style과 함께 사용할 때 특별히 향상된 기능을 제공합니다. 문자열뿐만 아니라 개체 또는 배열도 평가할 수 있습니다.

 

 

HTML 클래스 바인딩

객체 구문

v-bind:class에 개체를 전달하여 클래스를 동적으로 전환할 수 있습니다.

<div v-bind:class="{ active: isActive }"></div>

위의 구문은 active 클래스의 존재 여부가 isActive 데이터 속성의 true/false에 따라 결정된다는 것을 의미합니다.

개체에 더 많은 필드가 있어 여러 클래스를 토글할 수 있습니다. 또한 v-bind:class 지시문은 일반 class 속성과 함께 사용할 수도 있습니다. 따라서 다음과 같은 템플릿이 지정됩니다.

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

<script>
  var ex1 = new Vue({
    el: "#ex1",
    data: {
      isActive: true,
      hasError: false
    }
  })
</script>

다음과 같이 렌더링됩니다.

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

isActive 또는 hasError가 변경되면 그에 따라 클래스 목록이 업데이트됩니다. 예를 들어 hasError가 true가 되면 클래스 목록이 "static active text-danger"이 됩니다.

 

바인딩된 개체는 인라인일 필요가 없습니다.

<div id="ex2" class="static" v-bind:class="classObject"></div>

<script>
  var ex2 = new Vue({
    el: "#ex2",
    data: {
      classObject : {
        active: true,
        'text-danger': false
      }
    }
  })
</script>

이것은 동일한 결과를 렌더링합니다. 

 

객체를 반환하는 계산된 속성에 바인딩 할 수도 있습니다 . 이것은 일반적이고 강력한 패턴입니다.

<div id="ex3" v-bind:class="classObject"></div>

<script>
  var ex3 = new Vue({
    el: "#ex3",
    data: {
      isActive: true,
      error: null
    },
    computed: {
      classObject: function(){
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }
  })
</script>

 

배열 구문

v-bind:class에 배열을 전달하여 클래스 목록을 적용할 수 있습니다.

<div id="ex4">
  <div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script>
  var ex4 = new Vue({
    el: "#ex4",
    data: {
      activeClass: "active",
      errorClass: "text-danger"
    }
  })
</script>

삼항 표현식을 사용하면 클래스 목록을 조건부로 전환할 수 있습니다.

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

errorClass가 항상 적용되지만 isActive가 true일 때만 activeClass가 적용됩니다.

 

그러나 여러 개의 조건부 클래스가 있는 경우 약간 세부적일 수 있습니다. 따라서 배열 구문 내에서 개체 구문을 사용할 수도 있습니다.

<!-- isActive가 true일 경우, active 클래스 부여 -->
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

 

컴포넌트 사용

사용자 지정 컴포넌트에서 class 속성을 사용하면 해당 클래스가 구성 요소의 루트 요소에 추가됩니다. 이 요소의 기존 클래스는 덮어쓰지 않습니다.

예를 들어,이 구성 요소를 선언하는 경우 :

<div id="ex5">
  <my-component class="baz boo"></my-component>
</div>

<script>
  Vue.component('my-component', {
    template: '<p class="foo bar">Hi</p>'
  })
  new Vue({
    el: "#ex5"
  })
</script>

렌더링된 HTML은 다음과 같습니다.

<p class="foo bar baz boo">Hi</p>

클래스 바인딩도 마찬가지입니다.

<my-component v-bind:class="{ active: isActive }"></my-component>

 

 

인라인 스타일 바인딩

객체 구문

v-bind:style에 대한 개체 구문은 매우 간단합니다. JavaScript 개체라는 점을 제외하면 CSS와 거의 유사합니다. CSS 속성 이름에 camelCase 또는 kebab-case(kebab-case와 함께 따옴표 사용)를 사용할 수 있습니다.

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

<script>
  var ex6 = new Vue({
    el: "#ex6",
    data: {
      activeColor: 'red',
      fontSize: 24
    }
  })
</script>

템플릿이 더 깔끔해 지도록 스타일 객체에 직접 바인딩하는 것이 좋습니다.

<div id="ex6">
  <div v-bind:style="styleObject">VUUE!</div>
</div>
<script>
  var ex6 = new Vue({
    el: "#ex6",
    data: {
      styleObject: {
        color: "red",
        fontSize: "24px"
      }
    }
  })
</script>

다시 말하지만 객체 구문은 객체를 반환하는 계산된 속성과 함께 사용되는 경우가 많습니다.

 

배열 구문

v-bind:style에 대한 배열 구문을 사용하면 동일한 요소에 여러 스타일 개체를 적용할 수 있습니다.

<div id="ex7" v-bind:style="[baseStyle, overridingStyle]">HELLO AGAL</div>

<script>
  var ex7 = new Vue({
    el: "#ex7",
    data: {
      baseStyle : {
        color: "yellow",
        fontSize: "24px"
      },
      overridingStyle: {
        fontSize: "30px"
      }
    }
  })
</script>

 

자동 접두사

transform과 같이 v-bind:style에 벤더 접두사가 필요한 CSS 속성을 사용하면 Vue가 적용된 스타일에 적절한 접두사를 자동으로 감지하여 추가합니다.

 

여러 값

2.3.0 이상

 

2.3.0 이상부터 스타일 속성에 여러 값 (접두사)의 배열을 제공 할 수 있습니다. 예를 들면 다음과 같습니다.

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

이렇게 하면 브라우저가 지원하는 배열의 마지막 값만 렌더링됩니다. 이 예에서는 flexbox를 지원하는 브라우저의 경우 display: flex를 렌더링합니다.