[Vue.js][Ch2][Vue 문법] 클래스와 스타일 바인딩

HTML 클래스 바인딩

객체 구문

:class (v-bind:class의 약자)에 객체를 전달하여 클래스를 동적으로 전환할 수 있다.

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

class에 객체 데이터를 연결해서 쓸 것이고,

객체 데이터는 key : value 형태로 active라는 class를 isActive와 연결

-> isActive가 true이면 active와 연결, false이면 active와 연결 X => 클래스 바인딩

(isActive의 진실성에 의해 결정됨)

 

App.vue

<template>
    <!-- isActive가 true이면 active라는 class 추가  -->
  <h1
    :class="{ active: isActive }" 
    @click="activate">
    Hello?!({{ isActive }})
  </h1>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    activate() {
      this.isActive = true;
    }
  }
}
</script>

<style scoped>
  .active {
    color: red;
    font-weight: bold;
  }
</style>

 

바인딩 된 객체는 인라인일 필요는 없다.

( {a : b} 구조일 필요는 없다. )

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

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

• data 속성에 객체 데이터를 만들어서 연결해서 쓸 수 있다.

 

객체를 반환하는 computed property에 바인딩 할 수도 있다.

이것은 일반적으로 강력한 패턴이다.

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

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

배열 구문

배열을 :class에 전달하여 클래스 목록을 적용할 수 있다.

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

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

다음처럼 렌더링된다.

<div class="active text-danger"></div>

인라인 스타일 바인딩하기

인라인 스타일 : 태그 style 속성에 스타일을 직접접으로 작성하는 것

객체 구문

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

• CSS 속성에는 카멜케이스(ex. fontSize) 또는 케밥 케이스(ex.'font-size')를 사용할 수 있다.

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

App.vue

<template>
  <h1
    :style="{
      //color: color,   // 속성의 이름과 데이터의 이름이 같으면 단축시킬 수 있다. -> color
      //fontSize: fontSize
      color,
      fontSize
    }"
    @click="changeStyle">
    Hello?!
    </h1>
</template>

<script>
export default {
  data() {
    return {
      color: 'orange',
      fontSize: '30px'
    }
  },
  methods: {
    changeStyle() {
      this.color = 'red';
    }
  }
}
</script>

템플릿을 더 깔끔하게 만들기 위해, 스타일 객체에 직접 바인딩하는 것이 좋다.

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

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

App.vue

<template>
  <!-- 2개의 객체 데이터를 style로 연결하려면 배열 구문 사용 -->
  <h1
    :style="[fontStyle, backgroundStyle]"
    @click="changeStyle">
    Hello?!
    </h1>
</template>

<script>
export default {
  data() {
    return {
      fontStyle: {
        color: 'orange',
        fontSize: '30px'
      },
      backgroundStyle: {
        backgroundColor: 'black'
      }
    }
  },
  methods: {
    changeStyle() {
      this.fontStyle.color = 'red';
      this.fontStyle.fontSize = '50px';
    }
  }
}
</script>