:style 속성 활용하기 (inline style)

# snake case
<div class="demo" :style="{'border-color:red'}" @click="boxSelected('A')"></div>
# carmel case
<div class="demo" :style="{borderColor:'red'}" @click="boxSelected('A')"></div>

• 이때 "" 안에 ''를 한 번 감싸서 써야하는데 그 이유는
  여기 JavaScript 객체가 있고 또 프로퍼티명에 대시를 쓸 수 없기 때문이다.

• 그러므로 작은따옴표로 래핑하거나 또 다른 방법으로는 카멜 케이스 표기법으로 작성하는 방법이 있다.

3항 연산자"?"를 활용하여 동적 스타일링

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

• 하지만 이 inline styling 의 치명적인 문제점은 바로 다른 styling은 먹지 않는다는 것이다.

class를 dynamic binding 하기

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

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

• 위와 같이 바인딩할 수 있다 하지만 보면 아시다시피 가독성이 떨어지고 무엇보다 class가 많아진다면 매우 복잡하고 유지보수가 쉽지 않다.

• 하지만 이를 보완하기 위해 나온 구문이 있다. 이때 반드시 v-bind: 혹은 : 로 바인딩되어있는 상태여야한다.
  이렇게 되면 Vue가 객체구문을 지원하고 property들을 추가할 수 있게되는데 class를 구하고 참, 거짓을 통하여 클래스를 선택할 수 있다.

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

• 위 코드는 demo 라는 css값은 항상 truthy고 active css값은 boxASelected라는 data 속성값에 따라 달라진다.
  그래서 class와 :class는 별도로 지정도 가능하다.

computed와 함께 사용하기

• 물론 바로 위 코드를 보면 깔끔하겠지만 이마저도 로직이 길어지면 관리가 힘들게 된다. 그러므로 따로 옮기는 것이 좋아보이는데 이때 함께 사용하면 좋은 것이 앞서 말한 computed이다. 이 속성은 마치 data의 prop 처럼 사용해야한다고 했는데 한 번 적용해보자.

const app = Vue.createApp({
    data(){
        return{
            boxASelected : false,
            boxBSelected : false,
            boxCSelected : false
        }
    },
    computed : {
        boxAClasses(){
            return { active: this.boxASelected }
        },
        boxBClasses(){
            return { active: this.boxBSelected}
        }
    },
    methods : {
        boxSelected(box){
            if(box === "A"){
                this.boxASelected = !this.boxASelected;
            } else if (box === "B"){
                this.boxBSelected = !this.boxBSelected;
            } else {
                this.boxCSelected = !this.boxCSelected;
            }
        }
    }
});

app.mount("#styling")

    <section id="styling">
      <div class="demo" :class="boxAClasses" @click="boxSelected('A')"></div>
      <div class="demo" :class="boxBClasses" @click="boxSelected('B')"></div>
      <div :class="{demo:true, active:boxCSelected}" @click="boxSelected('C')"></div>
    </section>

multiple dynamic classes 적용하기

• 바로 [] 배열을 이용하면 된다. 이는 react에서도 사용했던 방식이다.

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

• 사실 위의 예제 코드는 demo가 true로 하드코딩되어있기 때문에 static에 가깝긴 하지만 위와같이 중괄호를 여러번 써서 여러개의 동적 바인딩도 가능하다.