[Vue.js] 7. HTML 클래스,스타일 바인딩에 대한 이해와 예제

해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면

Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기

 

 

HTML 클래스 바인딩

 

Vue는 Html 클래스를 동적으로 토클하는 기능을 제공합니다.

<div id="app">
  <span :class="{active: isActive}"> 안녕하세요</span> <br/>
  <button @click="createClass"> 클래스 생성 </button>
</div>

.active {
   color: red;
}

new Vue({
  el: '#app',
  data: {
  	isActive:false,
  },
  methods:{
  	createClass(){
    	this.isActive=!this.isActive;
    }
  }
})

 

참고:https://jsfiddle.net/qudcks0703/y1zef7or/127/

 

위의 코드는 버튼 클릭시마다 active라는 class를 토글 하는 코드입니다.

이와 같이 동적인 클래스를 적용시킬 수 있습니다.

 

 클래스 2개 이상 적용방법 (인라인)

 <span :class="{active: isActive,active2: isActive2}"> 안녕하세요</span> <br/>

클래스 2개 이상 적용방법 (인라인 X)

 

 <span :class="classObject"> 안녕하세요</span> <br/>

new Vue({
  el: '#app',
  data: {
  	classObject:{
    active: true,
    active2:false
  },
})

 이뿐만 아니라 계산된 속성을 적용하여 실행 할 수도 있습니다.

 

 

HTML Style 바인딩

 <span :style="styleObject"> 안녕하세요</span> <br/>

new Vue({
  el: '#app',
  data: {
  	styleObject:{
      color: red,
      text-align:center,
  	}
  }
})

스타일도 마찬가지로 HTML과 같은 방식으로 바인딩 할 수 있습니다.