class와 style 바인딩

일반적으로 요소에 데이터를 바인딩하는 이유는 클래스 목록과 해당 인라인 스타일을 조작하기 위함이다.

v-bind의 단축 표현

:class == v-bind:class //단축표현

class, style 둘 다 속성이므로 다른 속성과 마찬가지로 v-bind를 사용하여 문자열 값을 동적으로 할당할 수 있음

인라인 스타일 바인딩

const activeColor = ref('red')
const fontSize = ref(30)

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

인라인 스타일 바인딩에 쓰일 CSS 속성명 - camelCase

하지만? kebab-case도 지원함

외에도 바인딩 하는 방법은 여러가지다.

• 객체로 바인딩하기
• 배열로 바인딩하기

객체로 바인딩

<div :class="{ active: isActive }"></div>

const isActive = ref(true)

isActive 데이터 속성의 t/f값에 의해 active class의 존재 여부가 결정

:class 는 일반 class 속성과 공존할 수도 있음

---

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

<div :style="styleObject"></div>

배열로 바인딩

스타일 객체들로 구성된 배열을 :style에 바인딩할 수 있음

→ 병합되어 요소에 적용

<div :style="[baseStyles, overridingStyles]"></div>

---

실습

1부터 10까지 숫자가 변함에 따라 1~3은 red, 4~6은 green, 7~10은 blue로 스타일이 바뀌도록 하는 실습 예제를 만들어봤다.

• 1보다 작아지거나 10보다 커지질 수 없게 설정
• computed 를 활용하여 인라인 스타일 바인딩 하기

  객체를 반환하는 계산된 속성에 바인딩할 수도 있습니다. 이는 일반적이고 강력한 패턴입니다
  공식문서 참고

결과물

<span class="w-5 h-5" :class="styledByNum">{{ count }}</span>
	<div class="items-center flex justify-between">
        <button
          class="w-8 h-8 rounded-lg border-2 border-red-300 py-1 px-2"
          @click="plusCount"
        >
          +
        </button>
        <button
          class="w-8 h-8 rounded-lg border-2 border-red-300 py-1 px-2"
          @click="minusCount"
        >
          -
        </button>
	</div>

<script setup>
import { computed } from "vue";
import { ref } from "vue";

const count = ref(1);

const plusCount = () => {
  // 10까지만 ++
  if (count.value >= 10) return;
  else {
    count.value = count.value + 1;
  }
};
const minusCount = () => {
  // 1 이상일때만 --
  if (count.value <= 1) return;
  else {
    count.value = count.value - 1;
  }
};

const styledByNum = computed(() => {
  if (count.value >= 1 && count.value < 4) {
    return "text-red-500";
  } else if (count.value >= 4 && count.value < 7) {
    return "text-green-500";
  } else {
    return "text-indigo-500";
  }
});
</script>