Vue Tutorial 따라하기 - Class&Style Binding

지난 시간 green, blue로 출력된 글 자위에 mouseover 하면 해당 색상의 이미지가 출력되는 것을 확인했다.

이번 시간에는 이 글자 대신 실제 색상이 출력되게끔 코드를 변경할 것.

 

전

<div 
  v-for="variant in variants" 
  :key="variant.id" 
  @mouseover="updateImage(variant.image)" 
>{{ variant.color }}</div>

후

 <div 
  v-for="variant in variants" 
  :key="variant.id" 
  @mouseover="updateImage(variant.image)"
  class="color-circle"
  :style="{ backgroundColor:variant.color }"
></div>

 

위의 html파일에서 연결해준 class="color-circle"은 css파일의 다음 코드와 html 파일을 연결해준다.

css 파일 확인하기.

.color-circle {
  width: 50px;
  height: 50px;
  margin-top: 8px;
  border: 2px solid #d8d8d8;
  border-radius: 50%;
}

 

실제 실행시 다음과 같이 작동.

 

---

VUE 스타일 바인딩 사용하기

index.html

HTML 파일에서 아래와 같이 css 스타일 바인딩을 시킬 경우, 변수명 생성에 주의를 해야 할 점이 있다.

- <div :style="{background-color:variant.color }"></div>

위와 같이 background-color 이라고 속성을 지정할 경우, 해당 부분은 javascript로 인식되는 부분이기 때문에

속성이 아닌 마이너스로 인식이 된다.

때문에 아래와 같이 카멜 케이스 또는 '-'사인을 쓰되, 따옴표를 사용해 묶어 줘야 한다.

#Camel Case
<div :style="{backgroundColor:variant.color }"></div>

#Kebab Case
<div :style="{'background-color':variant.color}"></div>

 

만약 설정할 스타일이 하나가 아니라 여럿일 경우, 다음과 같이 js에 별도로 작성해 코드를 깔끔하게 유지할 수 있다.

 

index.html

<div :style="styles"></div>

main.js

data(){
	return {
    	styles:{
        	color:'red',
            fontSize:'14px'
        }
    }
}

=> 실행 시에는 javascript로 작성한 data() 내 styles값들이 대체되므로 다음과 같이 실행되는 효과가 있다.

<div style="color: red; font-size:14px"></div>

---

v-bind shortcut을 사용해 재고가 없을 경우 버튼에 비활성화 스타일 적용하기.

현재 재고가 없을 경우 버튼을 클릭하면 add to Cart 기능은 작동하지 않지만, 버튼의 스타일은 그대로이다.

사용자가 헷갈리지 않게 버튼이 disabled 되었다는 것을 보여주기 위해 Button 태그에 스타일을 적용할 것이다.

 

적용할 style은 styles.css 파일에 '. disabledButton'이라는 클래스명을 기반으로 작성되어 있기 때문에

우리는 이 클래스명을 필요한 곳에 적용시켜 주기만 하면 된다.

 

결과물 ( 재고가 없을 경우 )

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

 

v-bind shortcut인 ":" 콜론을 사용하여 동적으로 할당될 값들을 지정해주면, 다음과 같은 단계로 작동한다.

 

-index.html

<div class="color-circle"
	:class="{active:activeClass}">
</div>

main.js

data() {
	return {
    	activeClass: true
    }
}

위와 같이 div내에 미리 지정한 고정 class값을 갖고 있는 div태그에 :class라는 동적 클래스를 속성으로 지정해주면,

밑의 js파일에서 activeClass 값인 true를 리턴 받아 다음과 같이 코드가 적용되게 된다.

<div class="color-circle active">

즉, :class="{active:activeClass}"라는 것이 active 속성이 true인지 false인지 확인하여

해당 값에 따른 작동을 일으키려 하는 것이기 때문에,

active가 true라면 class = active, false라면 class =! active 가 적용되면 우리가 필요한 조건대로 동작됨!

---

Class Binding 기능 더 살펴보기.

Ternary Operators :  삼항 연산자.

같은 의미로, 삼항 연산자를 이용하면 훨씬 간단해 보이는 코드를 짤 수 있다.

index.html

<div :class="[isActive ? activeClass : '' ]">
</div>

main.js

data(){
	return {
    	isActive: true
    }
}

html 파일에 삼항 연산자를 통해 조건문을 작성할 경우, true이면 activeClass 클래스를 적용시키고, 아닌 경우 적용시키지 않는 방식으로 코드를 작성할 수도 있다.

위의 경우 isActive가 true값이므로 다음의 코드가 최종적으로 생성되게 된다.

<div class="activeClass">
</div>

활용방식이 무궁무진하므로 Vue 도큐먼트를 참고하면 더 많은 샘플을 볼 수 있다!