Vue, 클래스와 스타일 바인딩

전민승·2020년 11월 28일
0
<div v-bind:class="{ active: isActive }"></div>

active 클래스의 존재 여부 = 데이터 속성 isActive의 참 속성에 의해 결정

data: {
	isActive: true
}

데이터 렌더링

#컴포넌트와 함께 사용하는 방법

Vue.component('component', {
	template: '<p class="a b">Hi</p>'
})

클래스 바인딩 동일

<component v-bind:class="{ active: isActive }"></component>

isActive가 참일 때 렌더링 된 HTML

<p class="a b active">Hi</p>
profile
Frontend Developer

0개의 댓글