728x90
Computed 속성을 활용한 CSS Class 바인딩
- 주석 처리 한 것처럼 class 네임에 인라인으로 warning을 true일 때만 넣어줄 수가 있다.
- computed 속성을 활용하면 인라인이 아니라 하나의 함수명으로 제어할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.warning {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- <p v-bind:class="{ warning: isError }">Hello</p> -->
<p v-bind:class="errorTextColor">Hello</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isError: false,
},
computed: {
errorTextColor: function () {
return this.isError ? 'warning' : null;
},
},
});
</script>
</body>
</html>
'FrontEnd > Vue 2' 카테고리의 다른 글
| [Vue.js] style 태그에 있는 scoped의 의미 (0) | 2022.09.18 |
|---|---|
| [Vue.js] Vue CLI를 활용해서 로그인 form 만들기 (0) | 2022.09.18 |
| [Vue.js] 배운 내용들 Vue Cli로 마이그레이션 해보기 (0) | 2022.09.18 |
| [Vue.js] vue cli와 이전 방식 비교 (0) | 2022.09.18 |
| [Vue.js] Watch 속성 vs Computed 속성 (0) | 2022.09.18 |
| [Vue.js] Watch 속성 (0) | 2022.09.18 |
| [Vue.js] v-on 디렉티브를 통한 event Handle Methods binding (0) | 2022.09.18 |
| [Vue.js] 데이터 바인딩, 디렉티브 (0) | 2022.09.18 |
댓글