<template>
  <div id="app">
    <h1
    :style="{
      color:color,
      fontSize:fontSize
    }"
    @click="changeStyle">
    객체 데이터 적용 첫번째 방법 Hello?!
  </h1>
  <h1
    :style="fontStyle"
    @click="changeStyle2">
    객체 데이터 적용 두번째 방법Hello2?!
  </h1>
  <h1
    :style="[fontStyle, backgroundStyle]">
    여러개 객체 데이터 배열로 적용하는 방법 Hello2?!
  </h1>
  </div>
</template>

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