vue introduction - class and style binding

class and style binding 이란?

앞에서 속성을 배웠는데 속성중에서 디자인과 관련해서 가장 많이 사용되는 속성은 class 와 style 속성이다.

class, style 바인딩이 자주 사용되는 이유는 특정한 클래스 혹은 스타일을 동적으로 제어하는 경우가 많기 때문이다. 예를 들어, 메뉴가 있다면 선택된 메뉴만 진하게 표시하고 나머지 메뉴들은 연하게 표시하고자 한다면, jquery 같은 DOM 라이브러리를 사용한다면 메뉴들을 루프를 돌면서 현재 메뉴와 선택된 메뉴가 동일한지 체크해서 동일하다면 addClass 동일하지 않다면 removeClass를 적용해서 특정한 클래스를 동적으로 적용한다.

class 바인딩 문법은 앞에 속성 바인딩 문법과 동일하다.

:class=”{클래스명: true or false}”

=> 만일 true이면 class=”클래스명” 이 렌더링 될것이고 false이면 렌더링 되지 않으므로 jquery의 addClass, removeClass와 동일하게 작동한다.

style 바인딩 문법은

:style=”{backgroundColor: 변수명}”

변수명에 따라서 동적인 스타일 바인딩이 가능하게 된다.

페이지 목차

스타일 바인딩

green, blue 라는 글자 대신 스타일바인딩을 적용해보자.

variant.variantColor 부분에 각각 green, blue가 적용되어 스타일되는것을 확인하자.

...
      <ul>
        <li v-for="detail in details">{{ detail }}</li>
      </ul>

      <div class="color-box"
           v-for="variant in variants"
           :key="variant.variantId"
           :style="{ backgroundColor: variant.variantColor }"
           @mouseover="updateProduct(variant.variantImage)"
      >
      </div>

      <button @click="addToCart">Add to cart</button>
...

...

<ul>

<li v-for="detail in details">{{ detail }}</li>

</ul>

<div class="color-box"

v-for="variant in variants"

:key="variant.variantId"

:style="{ backgroundColor: variant.variantColor }"

@mouseover="updateProduct(variant.variantImage)"

</div>

...

클래스 바인딩

버튼을 아래와 같이 수정한다.

그리고, 콘솔창에서 app.inStock = false를 입력하여 버튼을 disable 시키고 disable된 버튼의 스타일도 확인한다.

...
      <button @click="addToCart"
              :disabled="!inStock"
              :class="{ disabledButton: !inStock }"
      >Add to cart</button>
...

...

<button @click="addToCart"

:disabled="!inStock"

:class="{ disabledButton: !inStock }"

>Add to cart</button>

...

객체 혹은 배열로 바인딩

객체를 직접 바인딩할 수도 있다.

data: { classObject: {active: true, danger: false} }

렌더링된 결과는

또한 배열로 바인딩하는것도 가능하다.

data: { activeClass: ‘active’, errorClass: ‘danger’ }

렌더링 되는 결과는 아래와 같다.

+ todo

inStock이 false이면 Out of Stock이라는글자에 라인을 긋도록 p 태그에 text-decoration: line=through 를 추가하자.

스타일바인딩도 가능하지만 클래스바인딩이 훨씬 효과적이다.

See the Pen Challenge 6 – Intro to Vue by Gregg Pollack (@GreggPollack) on CodePen.0