[ VueJS 입문 ] 클래스와 스타일 바인딩

• 클래스와 스타일 바인딩

이전에 다루었던 html속성을 바인딩 하기위한 v-bind 디렉티브를 사용할 때 class와 style을 사용해 원하는 스타일링을 할 수 있다.

v-bind:class="클래스명"

v-bind:class="{ 클래스명:조건 }"

위 처럼 v-bind:class는 문자열과 객체 또는 배열을 둘 다 받을 수 있다. 객체를 받은 경우 클래스명은 객체의 속성 키에, 해당 클래스가 적용되야하는 조건이 속성 값으로 들어간다.

https://jsfiddle.net/sunghun/th2m9ws7/57/

샘플의 내용을 하나씩 살펴보자.

• 1번 사각형 : v-bind:class가 객체를 받는 경우

<div>태그에 v-on:click 디렉티브로 attachRed의 값을 True/False로 변경해주고 동일하게 :class부분에 True라면 red클래스를, False라면 green 클래스를 사용하도록 하였습니다. 즉 css 부분에는 red, green 각 클래스별 스타일 정의를 해두고 그 클래스를 변경해주는 역할을 합니다. 해당 사각형을 클릭해본다면 처음에는 False이기 때문에 초록색의 상자, 클릭하면 True이기 때문에 빨간색으로 변한다.

• 2번 사각형 : v-bind:class각 문자열을 받는 경우

2번 사격형은 :class가 color라는 값을 받고 있다. Color는 data내에 보면 green이라는 문자열로 정의되어 있어 css의 green클래스를 사용하게 된다. 그리고 하단 input 박스에는 v-model="color"가 있는데 이 역시도 문자가 green으로 변경되어 input 안에 삽입되게 된다. 그렇다면 input안의 텍스트를 변경해보자. Red나 blue를 작성하면 2번의 상자의 색 역시 변경된다.

• 3번 사각형 : v-bind:class의 객체가 복잡한 경우

3번 사각형은 1번 사각형을 클릭할때 같이 색상이 변하는걸 봤을것이다. 코드를 보면 :class 부분에 divClasses라는 값을 받는데 이 내용은 computed에 선언되어 있다. attachRed의 값을 동일하게 리턴 받고 있다. 이처럼 복잡한 형태라면 computed 나 methods를 이용하여 클래스를 바인딩 시킬수 있다.

 

• 스타일 바인딩

이번에는 클래스가 아닌 css, 스타일을 직접 바인딩 하는 방법을 보자.

V-bind:style="{ 스타일명: 스타일값, 스타일명: 스타일값 }"

https://jsfiddle.net/sunghun/th2m9ws7/59/

2번 사각형부분 일부 내용이 변경 되었다. 소스를 보면 :style="{ height: myHeight }" 가 추가가 되었데 여기서 myHeight는 computed에 정의된 내용이다. 여기서에 조건문을 넣어 attachRed가 True이라면 50px, False이라면 200px를 지정했다. 그리하여 1번 사각형을 눌러 내용을 확인해보면 처음에는 False이기때문에 높이값이 200px로 실행되고 True가 된다면 50px로 크기가 줄어들 것이다.