728x90
반응형
Vue.js에서 CSS 클래스를 바인딩하는 방법은 두 가지가 있음:
- CSS 클래스명 문자열을 바인딩하는 방법
- true/false 값을 가진 객체를 바인딩하는 방법
CSS 클래스명 문자열을 바인딩하는 방법
이 방법은 데이터나 속성에 CSS 클래스명을 문자열로 할당하여 v-bind:class 혹은 **:class**로 바인딩하는 방식임. 데이터에서 CSS 클래스명을 문자열로 설정한 후, 이를 요소에 바인딩할 수 있음.
<body>
<div id="app">
<button :class="[ myColor, myLayout ]">테스트 버튼</button>
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var vm = Vue.createApp({
data() {
return {
myColor: "buttonColor",
myLayout: "buttonLayout"
}
}
}).mount("#app");
</script>
</body>
- 이 방식에서 클래스명 문자열을 배열로 바인딩하여 여러 클래스를 동시에 적용할 수 있음.
- 3항 연산자를 이용해 특정 조건에 따라 클래스를 동적으로 적용할 수도 있음.
<input type="checkbox" v-model="isMyLayout"> 레이아웃 적용 여부
<button :class="[myColor, isMyLayout ? myLayout : '']">테스트 버튼</button>
- isMyLayout의 값에 따라 myLayout 클래스의 적용 여부가 결정됨.
- 3항 연산자 a ? b : c의 형태로 조건에 따라 클래스를 적용할 수 있음.
true/false 값을 가진 객체를 바인딩하는 방법
이 방법은 클래스명을 객체의 속성명으로 사용하고, true/false 값에 따라 해당 클래스가 적용되도록 바인딩하는 방식임. 여러 개의 클래스를 동적으로 적용할 때 유용함.
<button :class="{ bColor: setColor, bLayout: setAlign, bBorder: setBorder }">버튼1</button>
<input type="checkbox" v-model="setColor"> 색상
<input type="checkbox" v-model="setAlign"> 정렬, 크기
<input type="checkbox" v-model="setBorder"> 테두리선
- setColor, setAlign, **setBorder**의 값이 true일 때 각각 bColor, bLayout, bBorder 클래스가 적용됨.
- **객체 표기법(Object Literal)**을 사용하여 클래스를 바인딩함.
객체를 미리 생성하여 바인딩하는 방법
객체를 매번 즉석에서 생성하지 않고, 데이터 초기화 시 미리 객체를 생성해두면 코드가 더 간결하고 관리하기 쉬움.
<button :class="myStyle">버튼1</button>
<input type="checkbox" v-model="myStyle.bColor"> 색상
<input type="checkbox" v-model="myStyle.bLayout"> 정렬, 크기
<input type="checkbox" v-model="myStyle.bBorder"> 테두리선
정적 클래스와 동적 클래스 함께 사용
Vue에서는 정적 클래스와 동적 클래스를 함께 사용할 수 있음. 예를 들어, 클래스 속성을 하드코딩한 상태에서 동적으로 클래스의 변경을 추가할 수 있음.
<button class="staticBorder" :class="myColor">테스트 버튼</button>**class="staticBorder"**는 항상 적용되고, **:class="myColor"**로 동적으로 클래스를 추가할 수 있음.
- CSS 클래스명 문자열 바인딩: 배열 형태로 클래스를 바인딩하거나 3항 연산자와 조합하여 조건에 따라 동적으로 클래스를 적용함.
- true/false 객체 바인딩: 객체의 속성명을 클래스명으로 사용하여, 속성 값이 true일 때만 해당 클래스를 적용함.
- 객체를 미리 생성하여 바인딩: 객체를 미리 초기화하여 사용하면 유지보수 및 코드 가독성이 향상됨.
- 정적 클래스와 동적 클래스 혼용: 정적 클래스를 항상 적용하면서, 동적으로 클래스를 추가할 수 있음.
이러한 바인딩 방법을 통해 Vue.js에서 더 동적이고 관리하기 쉬운 CSS 클래스 적용이 가능해짐.
728x90
반응형
'Web Development > vue' 카테고리의 다른 글
| [콜럼Vue스] To do list 만들기 (+리팩토링 추가) (0) | 2024.10.10 |
|---|---|
| [콜럼Vue스] 동적 스타일 바인딩 (0) | 2024.10.10 |
| [콜럼Vue스] 인라인스타일 (0) | 2024.10.10 |
| [콜럼Vue스] HTML 스타일 적용 우선순위 (0) | 2024.10.10 |
| [콜럼Vue스] 이벤트 수식어 (Once, 키코드, 마우스, exact ) (4) | 2024.10.08 |