클래스와 스타일 바인딩

클래스 바인딩

• key: className

• value: boolean형태로, truly면 해당 클래스 이름(key)가 클래스로 등록, falsy면(false, null, undefined,””) 등록하지 않음

<style>
  .orange {
      color: orange
  }
</style>
<div id="app">
    <button @click="toggle">Toggle</button>
    <h1 :class="{orange: color}">{{msg}}</h1> //객체 형태로 classList 표기 
</div>
<script>
    const app = {
        data() {
            return {
                msg: "Hello",
                color: true // "a", [], {}여도 true 취급
            }
        },
        methods: {
            toggle() {
                this.color = !this.color // truly, falsly 값도 각각 false, true로 치환됨
            }
        }
    }

    const vm = Vue.createApp(app).mount('#app')
</script>

• 클래스 이름 key가 대시 케이스 일때, 따옴표로 감싸줘야 한다
• 따옴표 안에서는 여러 클래스 key를 띄어쓰기로 구분해서 한번에 명시 가능

• 만약 클래스 객체를 inline이 아닌 data에 변수로 따로 뺄 수도 있다.
하지만, 다른 반응형 data를 값에서 썼을 때 (this키워드로 쓴다고 해도) 반응형이 되지는 못한다.
⇒ 이렇게 특정 data에 의존적이라면 computed에서 선언!

<style>
/* toggle버튼을 눌러 title-- 클래스들이 추가 되면, 
active 클래스는 우선순위가 밀려 스타일 효력이 없어짐 (명시도가 같다면나중 선언한게 더 높음) 
*/
    .active { 
        color: black;
        font-size: 10px
    }
    .title--orange {
        color: orange
    }
    .title--large {
        font-size: 50px;
    }
</style>
<div id="app">
    <button @click="toggle">Toggle</button>
    <h1 :class="classObject">{{msg}}</h1> //객체 형태로 클래스list를 받음
</div>
<script>
    const app = {
        data() {
            return {
                msg: "Hello",
                active: true,
                color: false,
                large: false,
            }
        },
        computed: {
            classObject() { //반응형 data를 쓰므로 data가 아닌 computed에서 선언
                return {
                    'title--orange': this.color, 
                    'title--large': this.large,
                    'active default': this.active // 띄어쓰기로 class이름 2개 선언
                }
            }
        },
        methods: {
            toggle() {
                this.color = !this.color
                this.large = !this.large
            }
        }
    }

    const vm = Vue.createApp(app).mount('#app')
</script>

 

• 객체가 아닌 배열형태로도 클래스 리스트를 표현할 수 있다
• :class=”[클래스이름1, 클래스이름2]”

<div id="app">
    <h1 :class="classArr" @click="changeTitle">{{msg}}</h1>
	//클래스 이름을 배열로, 클릭 이벤트로 클래스 이름 원소를 바꿈
</div>
<script>
    const app = {
        data() {
            return {
                msg: "Hello",
                classArr: [ 
                    'active',
                    'defaul'
                ]
//active, defaul를 각각 데이터로 표현할 수도 있다
//그렇게 되면 html코드는 :class="[active, defaul]"가 돼야 함
            }
        },
        methods: {
            changeTitle() {
                this.classArr[1] = "title--large"
//이름 원소를 바꿈
            }
        }
    }

    const vm = Vue.createApp(app).mount('#app')
</script>

• 변수나 key 이름으로 예약어(default 등)는 사용하지 못함에 주의
• 따옴표로 감사진 string 형태에서는 ㄱㅊ
 
 
 

스타일 바인딩

v-bind:style의 값으로 객체를 줘서 인라인 스타일도 뷰 데이터들에 바인딩 할 수 있다
• 값은 작은 따옴표로 감싸야 한다
• 콜백 메서드가 두개 이상이면 호출 형태로 표현한다

<div id="app">
    <h1 class="title" :style="{width:`${width}px`, color, border: 'solid'}" 
			@click="colorChange(); increaseWidth()">{{msg}}</h1> 
		//콜백 메서드가 두개 이상이면 호출 형태로 표현한다
</div>
<script>
    const app = {
        data() {
            return {
                msg: "Hello",
                color: "black",
                width: 200
            }
        },
        methods: {
            colorChange() {
                this.color = this.color === 'royalblue' ? 'black' : 'royalblue'
            },
            increaseWidth() {
                this.width += 10
            }
        }
    }

    const vm = Vue.createApp(app).mount('#app')
</script>

 
• 스타일 값인 객체를 데이터로 관리하고 싶다면 ?? ⇒ 여기서도 반응형 데이터를 쓰니 computed에 정의

<div id="app">
    <h1 class="title" :style="styleObject" @click="colorChange(); increaseWidth()">{{msg}}</h1>
</div>
<script>
    ...
        computed: {
            styleObject() {
                return {
                    width:`${this.width}px`,
                    color: this.color, 
                    border: 'solid'
                }
            }
        },
...
</script>

 
• 스타일의 속성 key는 원래 대시케이스지만, v-bind에서는 카멜케이스로 작성해도 변환을 알아서 해줌

<div id="app">
    <h1 class="title" :style="{color, backgroundColor}">{{msg}}</h1>
</div>
<script>
    const app = {
        data() {
            return {
                msg: "Hello",
                color: "black",
                backgroundColor: 'orange'
            }
        },
..
</script>

• 배열로 스타일 객체를 여러개 줄 수도 있다
• 나중에 들어온 요소의 우선순위가 더 높음에 주의

<div id="app">
    <h1 class="title" :style="[color, font]">{{msg}}</h1>
</div>
<script>
    const app = {
        data() {
            return {
                msg: "Hello",
                color: {
                    color: 'red', //값은 무조건 따옴표 안에서
                    backgroundColor: 'hotpink' //역시 카멜케이스 속성 ㅇㅋ
                },
                font: {
                    'font-size': '10px',
                    color: 'yellow' //배열 우선순위가 font가 나중이므로 color는 yellow가 됨
                }
..
</script>