VueJS day5

클래스 바인딩 | 스타일 바인딩

클래스 바인딩

클래스 바인딩은 요소에 클래스를 설정하여 토글형식으로 클래스를 추가, 제거를 연속적으로 가능하게 하는 방식이다.

<div :class="{ blue : isBlue }">Hello</div>

이러한 코드가 있으면 클래스를 v-bind로 설정하고 클래스이름과 클래스 속성값을 지정해준다. 클래스 속성값은 Vue 객체에서 데이터 속성으로 false 혹은 true의 값으로 클래스를 추가, 제거하게 된다.

<div id="app">
    <div :class="{ blue : isBlue }">Hello</div>
    <button @click="update">버튼</button>
</div>

div{
    font-size: 30px;
    font-weight: 900;
}
.blue{
    color: blue;
}

var app = new Vue({
    el: '#app',
    data: {
        isBlue:false
    },
    methods: {
        update(){
            this.isBlue = true;
        }
    }
})

update메소드 실행전

update메소드 실행후

스타일 바인딩

style앞에 v-bind: 이용하면 역시 바인딩이 가능하다.

<div :style="{color:color, fontSize: size}">Hello</div>

style 안에 color와 fontSize를 선언해주고 속성값들은 vue 데이터속성값에서 지정해줄 수 있다.

<div id="app">
    <div :style="{color:color, fontSize: size}">Hello</div>
</div>

var app = new Vue({
    el: '#app',
    data: {
        color: 'blue',
        size: '30px'
    }
})