반응형
객체 바인딩
클래스를 동적으로 바인딩하기 위해서는 :class(v-bind : class)를 사용할 수 있다.
active는 style이 정의되어 있는 class이고
isActive는 true, false 값이 저장되어 있는 변수다.
'text-danger' 는 가운데에 - 가 있어서 '' 로 감쌌을뿐 똑같이 style이 정의되어 있는 class이고
hasError는 true, false 값이 저장되어 있는 변수다.
Class 바인딩은 이렇게 여러 class 사용이 가능하다.
위 예시처럼 v-bind:class 디렉티브는 일반 class 속성과 공존할 수 있다.
그리고 객체를 반환하는 computed에 바인딩 할 수도 있습니다.
만약에 바인딩할 데이터가 많다면 객체로 선언해서 사용할수 있다.
active되는 조건이 여러개가 필요하면 computed를 활용하여 효율적으로 구현할 수 있다.
&& (and조건) 으로 여러개를 넣을수 있다.
1. 3항연산자를 사용하여 바인딩도 가능하다.
2. 뒤에 있는 errorClass는 일반 Class이다.
3. classObject는 computed 객체이다.
배열을 사용하여 전부 다 동시에 사용 가능하다.
인라인 style 적용도 가능하다.
인라인 style에 반응형 데이터 연결해서 사용하는것도 가능하다.
반응형
'vue.js > Vue3 - 기본편' 카테고리의 다른 글
| 11. 목록 렌더링 (v-for) (0) | 2024.01.21 |
|---|---|
| 10. 조건부 렌더링 (v-if, v-else, v-else-if, v-show, v-if 와 v-for) (0) | 2024.01.21 |
| 8. computed (0) | 2024.01.21 |
| 7. 반응형 기초 (reactive, ref, toRefs, toRef, readonly) (0) | 2024.01.18 |
| 6. 템플릿 문법 (텍스트 보간법, v-once, v-html, v-bind) (0) | 2024.01.14 |