Vue와 DOM 상호작용 4

1. 동적스타일링

vue에서는 페이지 스타일을 동적으로 변경할 수 있습니다. 여기서 동적이란 클릭 또는 사용자가 무엇을 입력하는 것에 대한 반응입니다.

1-1 인라인 스타일

<section id="styling">
   <div class="demo" :style="{borderColor:boxASelected ? 'red' : '#ccc'}" @click="boxSelected('A')"></div>
  <div class="demo"  @click="boxSelected('B')"></div>
  <div class="demo" @click="boxSelected('C')"></div>
</section>

  methods: {
    boxSelected(box) {
      if(box=='A') {
        this.boxASelected =true
      } else if (box==='B') {
        this.boxBSelected = true
      } else if(box==='C') {
        this.boxCSelected = true
      }
    }
  },

1-3 객체 할당을 이용한 스타일 바인딩

<div 
     :class="boxASelected ? 'demo active' : 'demo'" 
     @click="boxSelected('A')"></div>

위와 같이 작성한 코드를 v-bind에 객체를 전달함으로써 조금 더 읽기 쉽게 만들 수 있습니다.

<div 
     :class="{demo:true, active: boxASelected}"
     @click="boxSelected('A')"></div>

또한 일반 클래스 속성과 동적으로 바인딩될 클래스 속성을 나누어 작성할 수도 있습니다.

<div 
     class="demo"
     :class="{active: boxASelected}"
     @click="boxSelected('A')"></div>

또한 배열을 이용해 여러 클래스를 한꺼번에 할당할 수도 있습니다.

<div 
     :class="['demo', {active: boxASelected}]"
     @click="boxSelected('A')"></div>

토글형식으로 만들기

methods: {
  boxSelected(box) {
    if(box=='A') {
      this.boxASelected = !this.boxASelected
    } else if (box==='B') {
      this.boxBSelected = !this.boxBSelected
    } else if(box==='C') {
      this.boxCSelected = !this.boxCSelected
    }
  }
},

1-4 Computed를 이용한 스타일 바인딩

html에 작성된 코드를 JS로 분리하고 싶다면 computed속성을 이용할 수 있습니다.

<div 
     class="demo"
     :class="boxAClasses"
     @click="boxSelected('A')"></div>

  computed: {
    boxAClasses() {
      return {active: this.boxASelected}
    }
  },