실전 코드로 배우는 Vue.js

61

CHAPTER 02

Vue의 기본 작동 방식

2.102.10

클래스 및 스타일 속성 바인딩 클래스 및 스타일 속성 바인딩

class

또는

style

속성을 바인딩할 때는 배열 또는 객체 타입의 표현식을 전달한다.

Vue

엔진은 이를 분석해 알맞은 스타일 또는 클래스명 문자열로 통합할 수 있다.

예를 들어 [예제

2

-

5

]의

img

에 다음과 같이 몇 가지 클래스를 추가해보자.

import { createApp } from 'vue'

const App = {

template: `

<img v-bind="image" />

`,

data() {

return {

image: {

src: "https://res.cloudinary.com/mayashavin/image/upload/TheCute%20Cat",

alt: "A random cute cat image",

class: ["cat", "image"]

}

}

}

}

const app = createApp(App)

app.mount('#app')

이 코드는 클래스명이 단일 문자열

"

cat

image

"

인

<

img

>

엘리먼트를 다음과 같이 생성

한다.

<img

src="https://res.cloudinary.com/mayashavin/image/upload/TheCute%20Cat"

62

실전 코드로 배우는 Vue.js