● v-bind 디렉티브와 함께 사용하기
요소의 스타일을 동적으로 바인딩하고 싶다면 style 속성과 함께 v-bind 디렉티브를 사용합니다. 단, style 속성만 단독으로 사용할 때와는 다르게 객체 리터럴 형식으로 CSS 속성과 값을 지정합니다.
v-bind/src/App.vue
<script>
export default {
data() {
return {
primaryColor: 'red',
primaryStyle: 'italic',
};
},
}
</script>
<template>
<h1 :style="{ color: primaryColor, fontStyle: primaryStyle }">Inline Style</h1>
</template>