728x90
반응형
동적 스타일 바인딩이란 Vue.js에서 데이터 상태에 따라 HTML 요소에 동적으로 CSS 스타일을 적용하는 방법임. 동적 스타일 바인딩을 사용하면 사용자 입력, 이벤트 발생 등에 따라 실시간으로 스타일을 변경할 수 있음. Vue.js에서는 v-bind:style 또는 :style 디렉티브를 사용해 인라인 스타일을 바인딩할 수 있음
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>06-10 동적 스타일 바인딩</title>
<style>
.score { border: solid 1px black; }
.warning { background-color: skyblue; color: purple; }
.warnimage { width: 18px; height: 18px; top: 5px; position: relative; }
</style>
</head>
<body>
<div id="app">
<p>1부터 100까지만 입력 가능합니다.</p>
<div>
점수: <input type="text" class="score" :class="info" v-model.number="score" />
<img src="https://contactsvc.bmaster.kro.kr/img/error.png"
class="warnimage"
v-if="info.warning"
title="1부터 100까지만 입력하세요." />
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script type="text/javascript">
var vm = Vue.createApp({
data() {
return {
score: 50 // 초기 점수 값
};
},
computed: {
info() {
return {
warning: this.score < 1 || this.score > 100 // 점수가 1 ~ 100 사이인지 확인
};
}
}
}).mount("#app");
</script>
</body>
</html>코드 설명
- HTML 구조:
- 점수를 입력할 수 있는 <input> 요소가 있음. 이 요소에는 기본적으로 score 클래스가 적용됨.
- 점수가 1부터 100 사이가 아니면 경고 이미지와 함께 경고 스타일이 적용됨.
- Vue.js 인스턴스:
- data(): 기본 점수(score) 값을 관리함. 초기 값은 50으로 설정되어 있음.
- computed: 계산된 속성 **info()**에서 경고 조건을 계산하여 반환함. 점수가 1보다 작거나 100보다 크면 warning: true로 설정되어 경고 스타일이 적용됨.
- 동적 스타일 바인딩:
- v-bind:class 또는 **:class**를 사용하여, info.warning 값에 따라 경고 스타일을 적용함.
- v-if="info.warning": 점수가 올바르지 않으면 경고 이미지를 보여줌.
동적 스타일 바인딩 활용
- 사용자 입력이나 이벤트에 따라 실시간으로 스타일이 변경되므로 인터랙티브한 사용자 경험을 제공할 수 있음.
- **계산된 속성(Computed Property)**를 사용하여 복잡한 조건에 따라 자동으로 스타일을 업데이트할 수 있음.
- 동적 스타일 바인딩은 폼 유효성 검사, 동적 테마 변경, 상태에 따른 UI 업데이트 등 다양한 상황에서 유용하게 사용될 수 있음.
728x90
반응형
'Web Development > vue' 카테고리의 다른 글
| [콜럼Vue스] Vue CLI와 프로젝트 구조: 컴포넌트 기반 (1) | 2024.10.11 |
|---|---|
| [콜럼Vue스] To do list 만들기 (+리팩토링 추가) (0) | 2024.10.10 |
| [콜럼Vue스] CSS 클래스 바인딩 (0) | 2024.10.10 |
| [콜럼Vue스] 인라인스타일 (0) | 2024.10.10 |
| [콜럼Vue스] HTML 스타일 적용 우선순위 (0) | 2024.10.10 |