흔히 html 스타일을 꾸미는데 사용하는 class 와 style 속성을 바인딩 할 수 있다.

 :class 

1. 객체 구문

<div class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
></div>
<!-- isActive 와 text-danger 값이 true 일 때 -->
<div class="static active text-danger"></div>

위와 같이 객체 형식으로 여러 class 바인딩 설정이 가능하며, 일반 class 와도 함께 사용하는 것이 가능하다.

2. 배열 구문

<script>
data() {
    return {
        activeClass: 'active',
        errorClass: 'text-danger'
    }
}
</script>

<div :class="[activeClass, errorClass]"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
<div :class="[{ active: isActive }, errorClass]"></div>

위와 같이 배열 형식은 삼항표현식도 가능하고, 객체 구문을 포함할 수도 있다.

3. 컴포넌트 사용

<div id="app">
    <my-component class="baz1"></my-component>
    <my-component class="baz2"></my-component>
</div>

<script>
const app = Vue.createApp({})

app.component('my-component', {
    template: `
        <p :class="$attrs.class">Hi!</p>
        <span>This is a child component</span>
    `
})
</script>

컴포넌트에서 여러 루트 엘리먼트(위에서는 p 와 span 태그)를 정의한 경우 $attrs 속성을 사용하여 클래스를 각각 전달 받을 수도 있다.

 :style 

:style 구문의 사용법은 class 와 매우 비슷하게 객체/배열 구문을 사용할 수 있다. JavaScript 객체인 것을 제외하고는 css 와 흡사하다.

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>