[Vue.js] Vue 클래스와 스타일 바인딩 (Class and Style Bindings)

Vue 클래스와 스타일 바인딩 (Class and Style Bindings)

Vue.js에서 클래스와 스타일 바인딩은 HTML 요소의 클래스 및 인라인 스타일을 동적으로 조작할 수 있는 기능을 제공하여

데이터 상태에 따라 요소의 모양 및 스타일을 변경할 수 있음.

(다른 속성과 마찬가지로 v-bind를 사용하여 동적 할당)

 

 

# HTML 클래스 바인딩

 

객체 바인딩

클래스를 동적으로 객체를 :class( = v-bind:class)에 전달.

 

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

<!-- isActive 의 참 거짓에 따라 active 클래스 추가/제거 -->

<script>
  export default{
    data() {
      return {
        isActive: true,
        hasError: false
      }
    }
  }
</script>
<template>
  <div class="about">
    <h1>Class Style Binding page</h1>
    <div :class="{ active: isActive }"></div>
		<div :class="{ active: isActive, 'error':hasError }"></div>

  </div>
</template>

 

<script>
  export default{
  data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
       }
    }
  }
</script>

<template>
	<div :class="classObject"></div>
</template>

<!-- 바인딩된 객체는 인라인일 필요 없음-->

 

 

배열 바인딩

:class를 배열로 바인딩하여 클래스 목록을 작성할 수 있음.

<script>
  export default{
  	data() {
      return {
        activeClass: 'active',
        errorClass: 'text-danger'
  		}
	 }
  }
</script>

<template>
	<div :class="[activeClass, errorClass]"></div>
</template>

<!-- <div class="active text-danger"></div> 로 출력 -->