[Vue.js] Vue 컴포넌트 스타일 바인딩 사용법

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
    이 텍스트의 색상과 크기는 동적으로 변경됩니다.
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 'blue', // 초기 색상 설정
      fontSize: 16 // 초기 폰트 크기 설정
    };
  }
};
</script>

<style scoped>
/* 여기에 컴포넌트에만 적용될 스타일을 작성할 수 있습니다. */
</style>

Vue에서 스타일을 동적으로 바인딩하는 방법을 알아봅시다.

위 예제는 Vue의 컴포넌트에서 스타일을 동적으로 변경하는 방법을 보여줍니다. :style 디렉티브를 사용하여 객체를 전달하여 스타일 속성을 설정합니다. 이 객체의 속성은 CSS 속성 이름을 키로 사용하고, 해당 속성에 적용할 값을 값으로 사용합니다. 이 예제에서는 color와 fontSize 속성을 동적으로 변경하고 있습니다.

activeColor와 fontSize는 컴포넌트의 데이터 속성으로 정의되어 있습니다. 이 값들을 변경하면 컴포넌트의 스타일도 자동으로 업데이트됩니다.

Vue의 컴포넌트는 재사용 가능한 조각으로, 각각이 독립적인 스코프를 가질 수 있습니다. 따라서 위 예제에서 scoped 속성을 사용하여 스타일이 컴포넌트 내부에만 적용되도록 했습니다.

이렇게 함으로써 Vue에서 동적으로 스타일을 바인딩하는 방법을 익힐 수 있습니다.