다이너믹 클래스(Dynamic class)
미리 클래스 이름에 스타일을 지정해 놓고,
조건에 맞추어 해당 클래스 적용시킬 때 사용합니다.
다이너믹 클래스를 적용하는 방법은 2가지입니다.
사용할 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue class</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
body {
cursor: pointer;
user-select: none; //선택시 block 방지
}
.done {
text-decoration: line-through;
color: #828282;
}
.important {
font-weight: bold;
}
.ready {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<div id="app">
<div v-for="item in items">{{ item.subject }}</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
items: [{
subject: '10 pens',
purchased: false,
status: true,
},
{
subject: '20 bags',
purchased: true,
status: false,
},
{
subject: '5 coffee',
purchased: false,
status: true,
},
{
subject: '8 towels',
purchased: true,
status: false,
},
],
},
})
</script>
</body>
</html>
화면 결과
v-for로 items에서 subject만 추출하였고,
style 태그 안에, 클래스 done/important/ready의 이름과 스타일을 지정해 주었습니다.
다이너믹 클래스를 적용하는 방법은
객체와 배열의 방식이 있습니다.
하나씩 알아보겠습니다.
1. 객체(object)
객체 속성에는 클래스 이름, 값은 조건을 넣어 줍니다.
v-bind:class="{ 클래스 이름: 조건 }"
예제 1)
<div v-for="item in items" v-bind:class="{ done: item.purchased }">{{ item.subject }}</div>item.purchased 값이 true이면 클래스 이름 done을 부여합니다.
결과
예제 2)
<div v-for="item in items" v-bind:class="{ done: item.purchased === false }">{{ item.subject }}</div>
//또는 v-bind:class="{ !done: item.purchased }" 같은 의미item.purchased 값이 false이면 클래스 이름 done을 부여합니다.
결과
2. 배열(Array)
배열의 경우는
클래스를 추가로 바인딩시켜 보다 flexible 하게 사용이 가능합니다.
v-bind:class="[ 조건? '클래스 이름' : '' ]" //삼항연산자
예제 1)
<div v-for="item in items" v-bind:class="[ item.purchased? 'done' : '' ]">{{ item.subject }}</div>item.purchased 값이 true이면 클래스 이름 done을 부여합니다.
결과
예제 2)
<div v-for="item in items" v-bind:class="[ item.purchased? 'done' : 'important' ]">{{ item.subject }}</div>item.purchased 값이 true이면 클래스 이름 done을 부여하고, false이면 important를 부여합니다.
결과
두 개의 조건을 배열에 바인딩시킬 경우,
예제 3)
<div v-for="item in items"
v-bind:class="[ item.purchased? 'done' : '', item.status? 'ready' : '' ]">
{{ item.subject }}
</div>
item.purchased 값이 true이면 클래스 이름 done을 부여하고,
item.status 값이 true이면 ready를 부여합니다.
결과
조건에 따라 바인딩되는 다이너믹 클래스와는 달리
일반적으로 사용하는 방법인 조건 없이 클래스 이름을 붙이고 싶을 경우,
아래와 같이 배열 안에 클래스 이름 삽입합니다.
예제 4)
<div v-for="item in items"
v-bind:class="[ item.purchased? 'done' : '', 'ready' ]">
{{ item.subject }}
</div>혹은 아래와 같이 태그 안에 클래스 선언합니다.
예제 5)
<div v-for="item in items" class="ready"
v-bind:class="[ item.purchased? 'done' : '' ]">
{{ item.subject }}
</div>
이 경우, 다이너믹 클래스와 함께 사용이 가능합니다.
예제 4, 예제 5 결과
shortcut 문법
v-bind:class는 :class로 간단하게 표현할 수 있습니다.
<div v-for="item in items" :class="[ item.purchased? 'done' : '' ]">{{ item.subject }}</div>
객체 방식 와 배열 방식의 비교
보다 많은 클래스 이름을 부여하고 통제하고 싶을 경우는
배열 방식을 사용하고,
심플하게 사용할 경우는 객체 방식을 사용합니다.
클릭 이벤트를 이용한 토글 기능 추가
여기에 좀 더 다이너믹한 토글(toggle) 기능을 사용하고 싶을 경우,
클릭 이벤트 methods를 줍니다.
vue 인스턴스, methods에 아래의 toggleFn 함수를 만듭니다.
methods: {
toggleFn(item) {
item.purchased = !item.purchased
}
}
<div v-for="item in items"
v-bind:class="[ item.purchased? 'done' : '' ]" @click="toggleFn(item)">
{{ item.subject }}
</div>item 클릭 시 toggleFn(item) 함수를 적용하여,
클릭할 때마다 클래스 done이 on/off 됩니다.
화면 결과(Result 클릭)
인라인 스타일 바인딩
· v-bind:style을 이용하여 태그 속성에 바로 style을 반영합니다.
· 속성 이름에 camelCase와 kebab-case (따옴표를 함께 사용)를 사용합니다.
예제 1) 인라인 스타일
<div :style="{ display: 'flex', alignItems: 'center' }"></div>
예제 2) 데이터를 활용
<div :style="{ display: activeDisplay, alignItems: alignItems }"></div>data() {
return {
activeDisplay: 'flex',
alignItems: 'center'
}
}
예제 3) 위의 예제보다 심플한 코드입니다.
<div :style="tagStyle"></div>data() {
return {
tagStyle: {
display: 'flex',
alignItems: 'center'
}
}
}
'💻CODING > react. vue' 카테고리의 다른 글
| [vue] vue.js computed 속성 (0) | 2021.01.08 |
|---|---|
| [vue] v-if, v-else, v-show (ft. v-if와 v-show 차이점) (0) | 2021.01.08 |
| [vue] vue로 게시판 구현하기(ft. 검색, 게시물 추가, 편집, 삭제 기능) (0) | 2020.11.29 |
| [vue] vue 모달창, 다이얼로그 기능 구현하기(ft. slot) (0) | 2020.11.23 |
| [vue] vue.js Post 폼 데이터 api 전송하기(axios, 유효성 검사) (0) | 2020.11.22 |
댓글