vue3 클래스, 스타일 바인딩

 

//클래스 바인딩

<template>
  <h1
    :class="{ active: isActive}" 
    @click="activate">
    Hello World ( {{ 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>

 

스타일 바인딩

1. :style 부분에 직접 color:red 를 입력하는 방식
2. fontStyle 오브젝트 입력
3. [배열, 배열] 형식으로 입력

<template>
  <h1
    :style="[fontStyle, backgroundStyle]"
    @click="changeStyle">
    Hello My name is Solyi
  </h1>
</template>

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