v-bind를 사용하여 CSS에 대한 Vue3 상태

Photo by Jeffrey Leung on Unsplash.

애플리케이션을 더 동적으로 만들기 위해 Vue는 동적 상태를 템플릿 내부의 마크업에 연결할 수 있도록 합니다.

예를 들어 특정 기준이 충족되는 경우에만 요소에 클래스를 적용할 수 있습니다. 그러나 구성 요소 상태가 스타일 태그의 CSS 속성에 직접 적용될 수도 있다는 사실을 알고 계셨습니까?

스타일 태그는 동적 CSS 속성 값을 활성화하는 v-bind()라는 CSS 함수와 호환됩니다. 당면한 주제를 더 자세히 살펴 보겠습니다.

<template> <div class="custom-wrapper"> <Box v-for="i in 35" :key="i" /> </div> </template> <script setup> import Box from "./components/Box.vue" </script> <style scoped> .custom-wrapper { display: flex; justify-content: center; flex-wrap: wrap; max-width: 1260px; gap: 10px; } </style> 

App.vue라는 주요 부분의 코드는 위에 나와 있습니다. 아래에서 이 구성 요소의 일부로 Box.vue 파일로 가져오는 App.vue 구성 요소에 대한 코드를 볼 수 있습니다.

<template> <div class="custom-box"></div> </template> <style scoped> .custom-box { display: inline-flex; height: 50px; width: 50px; background: gray; } .is-done { background: #ffcd05; } </style> 

이 구성 요소를 살펴보면 매우 간단합니다. 이 상자를 만들기 위해 클래스div와 일부 스타일이 있는 custom-box만 있으면 됩니다. 이 구성 요소에 몇 가지 동적 CSS 속성 값을 제공하는 방법을 살펴보겠습니다.

먼저 color라는 새 속성을 설정해야 합니다. 이 속성의 기본값은 문자열 값#ffcd05입니다.

<script setup> defineProps({ color: { type: String, default: "#ffcd05" }, }) </script> 

이제 스타일 태그 내에서 이 속성color을 활용하고 아래와 같이 배경색 속성에 할당할 수 있습니다.

<style scoped> /* code omitted */ .is-done { background: v-bind(color); /* previous value: #ffcd05 */ } </style> 

결과적으로 이제 v-bind() 메서드를 활용하고 color 의 정적 값을 갖는 대신 #ffcd05 속성을 전달할 수 있습니다. 그런 다음 Box 구성 요소는 우리가 속성으로 제공하는 색상을 동적으로 수신합니다.

실제 값이 해시된 사용자 지정 속성으로 어셈블되기 때문에 CSS는 정적으로 유지됩니다. 인라인 스타일은 사용자 지정 속성을 구성 요소의 루트 요소에 적용하는 데 사용되며 소스 값이 변경되면 반응적으로 업데이트됩니다.

결론

v-bind() CSS 함수는 CSS 값을 동적 구성 요소 상태에 연결하기 위한 단일 파일 구성 요소<style> 태그에서 지원됩니다. Vue 구성 요소에서 반응성을 유지하는 재미있고 쉬운 방법입니다.