Vue js dynamic class 적용

Vue js dynamic class 적용

태그 요소에 스타일을 동적으로 적용하는 예제다. 처음 다루는 것이다 보니 생소해서 정리를 하긴 하는데.... 

<button
  @click="plusAddCompany"
  type="button"
  :class="{'btn btn--light btn--lg': this.flag, 'btn btn--primary btn--lg': !this.flag}"
  >예</button>

:class 바인딩 요소를 사용하고 

data {

안에 flag를 두고 값의 상태 변화에 따라 스타일(클래스)이 바뀌도록 하는 구조 

}

data () {
  return {
    flag : true 

plusAddCompany () {
  this.flag = false  //for style
  this.showAddCompany2 = true
  this.showAddCompanyBtn = true
},

편한 Vue, 하지만 어렵다웅...