클래스와 스타일 바인딩

참고 공식 사이트

https://v3.ko.vuejs.org/guide/class-and-style.html#html-%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A2%E1%84%89%E1%85%B3-%E1%84%87%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%83%E1%85%B5%E1%86%BC

클래스와 스타일 바인딩 | Vue.js

 

1. 클래스를 데이터와 바인딩하여 해당 데이터가 true일때 원하는 클래스를 적용시킬 수 있다.

2. Html 원하는 태그안에 직접적으로 스타일을 적용 시킬 수 있다.

3. data() 속성에 미리 스타일을 정의 해 두고 가져다가 사용할 수 있다.

4. 배열을 이용하여 여러 스타일을 한번에 적용 시킬 수 있다.

 

App.vue 코드를 이용한 예제

<template>
  <!-- isActive 데이터가 true이면 active 클래스를 바인딩 시킨다. -->
  <h1
    :class="{active: isActive}"
    @click="activate">
    Hello?! {{ isActive }}
  </h1>

  <!-- h1태그에 직접적으로 스타일을 적용시키는 방법 -->
  <h1
    :style="{color: color, fontSize: fontSize}"
    @click="changeStyle">
    Hello2
  </h1>

  <h1
    :style="fontStyle2"
    @click="change">
    Hello33
  </h1>

  <h1
    :style="[fontStyle2, backgroundStyle]"
    @click="change">
    2개의 스타일 적용
  </h1>
</template>

<script>
export default {
  data () {
    return {
      isActive: false,
      color: 'orange',
      fontSize: '30px',
      fontStyle2: {
        color: 'orange',
        fontSize: '30px'
      },
      backgroundStyle: {
        backgroundColor: 'black'
      }
    }
  },
  methods: {
    activate() {
      // isActive 데이터를 변경
      this.isActive = true
    },
    changeStyle() {
      this.color = 'red'
    },
    change() {
      this.fontStyle2.color = 'red'
      this.fontStyle2.fontSize = '50px'
    }
  }
}
</script>

// scoped: App.vue 파일 외에는 적용되지 않도록 설정하는 것
<style scoped>
  .active {
    color: red;
    font-weight: bold;
  }
</style>

 

브라우저 확인