[Vue.js] data의 boolean 값으로 클래스 적용하기

1. 하나의 클래스를 boolean 으로 적용하기

<div v-bind:class="{ hide: previewFlag }"></div>

...

data() {
	return {
		previewFlag: false
	};
},

previewFlag가 true 값일때 hide 클래스가 적용된다.

 

2. 두개 이상의 클래스를 boolean으로 적용하기

<div v-bind:class="[{ 'col-8': !previewFlag }, { 'col-12': previewFlag }]">

previewFlag에 따라 어떤 클래스가 적용될지 다음과 같이 할 수 있다.