vue: Class와 Style 바인딩

css클래스를 조작하는 스타일러 with chatGPT

Vue 3에서 Class와 Style 바인딩은 요소의 class와 style 속성을 동적으로 업데이트할 수 있게 해 주는 기능입니다. 이를 통해 데이터에 기반하여 CSS 클래스를 추가하거나 스타일을 변경할 수 있습니다. Vue의 반응형 특성을 이용해 상태 변화에 따라 UI의 스타일을 동적으로 바꾸는 데 유용합니다.

 

Class 바인딩

1. 객체 문법(Object Syntax)

객체 문법을 사용하면 클래스 이름을 키로, 해당 클래스가 적용될지 여부를 값으로 설정할 수 있습니다.

<template>
  <div :class="{ active: isActive, 'text-large': isLarge }">
    Class Binding Example
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isActive = ref(true);
    const isLarge = ref(false);

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

 

이 예시에서 isActive가 true일 때는 active 클래스가 적용되고, isLarge가 true일 때는 text-large 클래스가 적용됩니다.

 

2. 배열 문법(Array Syntax)

배열 문법을 사용하면 여러 개의 클래스를 배열로 전달할 수 있습니다.

<template>
  <div :class="[isActive ? 'active' : '', 'text-large']">
    Class Binding with Array
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const isActive = ref(true);

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

 

위 예시에서는 isActive가 true일 경우 active 클래스가 추가되고, 항상 text-large 클래스가 적용됩니다.

 

3. Computed 속성과 함께 사용하기

computed 속성을 이용하여 복잡한 조건을 처리하는 클래스를 바인딩할 수도 있습니다.

<template>
  <div :class="classObject">
    Computed Class Binding
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const isActive = ref(true);
    const isLarge = ref(false);

    const classObject = computed(() => ({
      active: isActive.value,
      'text-large': isLarge.value,
    }));

    return {
      classObject,
    };
  },
};
</script>

 

Style 바인딩

1. 객체 문법(Object Syntax)

객체 문법을 사용하여 여러 스타일을 객체 형태로 바인딩할 수 있습니다.

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
    Style Binding Example
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const textColor = ref('red');
    const fontSize = ref(20);

    return {
      textColor,
      fontSize,
    };
  },
};
</script>

 

여기서 textColor와 fontSize가 변경되면 해당 스타일이 반영됩니다.

 

2. 배열 문법(Array Syntax)

배열 문법을 사용하면 여러 스타일 객체를 배열로 전달할 수 있습니다. 앞에 정의된 스타일이 덮어씌워질 수 있으므로 주의가 필요합니다.

<template>
  <div :style="[baseStyles, additionalStyles]">
    Multiple Style Objects
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const baseStyles = ref({
      color: 'blue',
      fontSize: '18px',
    });

    const additionalStyles = ref({
      fontWeight: 'bold',
      color: 'red', // blue를 덮어씌움
    });

    return {
      baseStyles,
      additionalStyles,
    };
  },
};
</script>

 

 

Class와 Style 바인딩 요약

• Class 바인딩: 객체 문법과 배열 문법을 사용하여 조건부로 클래스 이름을 지정할 수 있습니다.
• Style 바인딩: 객체 문법과 배열 문법을 통해 조건부로 스타일을 지정할 수 있으며, 반응형 데이터를 이용해 동적으로 스타일 속성을 업데이트할 수 있습니다.
• computed 속성과 함께 사용하여 복잡한 조건을 적용한 클래스 또는 스타일 바인딩도 가능합니다.

이렇게 Vue 3의 :class와 :style 바인딩을 이용하면, 데이터에 따라 UI 스타일을 쉽게 동적으로 조정할 수 있습니다.