Class 와 Style 바인딩

Class 의 바인딩

Class 의 경우에는 v-bind를 사용하여 바인딩 하는 것과 중복되게 class 속성 값을 주는 것을 사용할 수 있다.

<template>
	<div>
		<div :class="{ active: isActive }">텍스트 입니다.</div>
		<button v-on:click="toggle">toggle</button>
	</div>
</template>

<script>
import { ref } from 'vue';
export default {
	setup() {
		const isActive = ref(true);

		const toggle = () => {
			isActive.value = !isActive.value;
		};

		return { isActive, toggle };
	},
};
</script>

<style>
.active {
	font-weight: 900;
}
</style>

위와 같이 설정하면 버튼을 누를 때 class가 바뀌는 것을 볼 수 있다.

class는 true일 때 적용되는 것을 볼 수 있다.

class 를 따로 넣으면 공존하게 된다.

그리고 여러개를 바인딩 할 수도 있다.

object로 사용할 수 있고 computed 안에 넣어서 사용할 수 있음. 배열로도 사용할 수 있다고 함.

  <div :class="[isActive, isError]"> </div>

이렇게 하면 여러개가 들어가는 것을 볼수 있음

style의 바인딩

		const styleObject = reactive({
			color: 'red',
			fontSize: '13px',
		});

위와 같이 객체로 넣어주면 들어가고 style naming은 우리가 알고 있는 형태 font-size를 camel case로 넣어준다 . (fontSize) 이런식으로

computed에 넣을 수 있다.