[Vue] 바인딩 v-bind:(style, class)

(사용법)
<태그 v-bind: [id, class, style] = 'data이름'></태그>

(예시)
<div v-bind:class="green"></div>

스타일 바인딩

1. v-bind:style을 이용해 size변수와 연결하고

2. 데이터 size변수에 css값 넣어주기 

// html

<weather-chart v-bind:style="size" />

// script

export default {
  data() {
    return {
      size: {
        paddingTop: '30px',
        height: '100px',
        width: '600px',
        backgroundColor: 'yellow'
      }
     }
    }

 

클래스 바인딩

1. v-bind:class을 이용해 size변수와 연결하고

2. size 변수에 사용할 class이름을 선언하고

3. css에 해당 class 꾸며주기  

// html
<button v-on:click="changeClass">클래스 변경</button>
<weather-chart v-bind:class="size" />


// script
export default {
  data() {
    return {
      size: 'firstClass' // 클래스 이름
    }
  },
  methods: {
  	changeClass(){
      this.size = 'secondClass' // 버튼을 이용해 클래스 변경
    }
  }
}

// css
  .firstClass{
    padding-top: 30px;
    height: 200px;
    width: 700px;
    background-color: orange;
  }
  .secondClass{
    padding-top: 30px;
    height: 200px;
    width: 700px;
    background-color: red;
  }

 

(변경 버튼 클릭전) 

size = 'firstClass'

(변경 버튼 클릭후)

size = 'secondClass'