Vue.js 문법 - 클래스와 스타일 바인딩

 

클래스 바인딩

 

<template>
  <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>

 

코드 이해하기

- <h1>태그 (Hello?!)를 클릭하면 isActive(기본값 false)가 true로 변경

- class 속성의 값(active)이 데이터이므로 v-bind: 디렉티브(약어)를 사용 :class="{ active: isActive }"

- { active: isActive }는 Key와 Value 형태, isActive는 (true, false)값을 가지고 있음

- active: true 라면 active 클래스를 추가, active: false 라면 클래스를 추가하지 않음

- 위의 개념이 클래스 바인딩(Class Binding)

 

---

 

인라인 스타일 바인딩

 

- :style의 객체 구문은 매우 간단

- JavaScript 객체라는 점을 제외하면 CSS와 거의 비슷

- CSS 속성 이름에는 카멜 케이스(camelCase) 또는 케밥 케이스(kebab-case, 케밥 케이스와 함께 따옴표 사용) 작성

 

<!-- App.vue -->
<!-- 객체 데이터에서 속성의 이름과 데이터의 이름이 동일하면 단축 가능하다-->
<!-- color: color => color --> 
<!-- fontSize: fontSize => fontSize --> 

<template>
  <h1
    :style="{
      color: color,  
      fontSize: fontSize
    }"
    @click="changeStyle">
    Hello?!
  </h1>
</template>

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

 

코드 이해하기

- :style="{ color: color, fontSize: fontSize }" 인라인 스타일 바인딩

- <h1>태그 (Hello?!)를 클릭하면, 메소드 changeStyle() 동작, 글자 색상이 red로 변경