[ Vue ] NUXT JS 클래스 바인딩

점수에 따라 클래스 변경하기 [ 조건을 여러개 넣을 때 ]

// 현재 넣어둔 조건
const newItems = [
    {
        score: 8.3
    }
]

 

<span class="icon" :class="[ { star0: data.newItems[0].score === 0 }, { star2: data.newItems[0].score > 0 && data.newItems[0].score < 2 }, { star1: data.newItems[0].score >= 2 } ]"></span>
<span class="icon" :class="[ { star0: data.newItems[0].score <= 2 }, { star2: data.newItems[0].score > 2 && data.newItems[0].score < 4 }, { star1: data.newItems[0].score >= 4 } ]"></span>
<span class="icon" :class="[ { star0: data.newItems[0].score <= 4 }, { star2: data.newItems[0].score > 4 && data.newItems[0].score < 6 }, { star1: data.newItems[0].score >= 6 } ]"></span>
<span class="icon" :class="[ { star0: data.newItems[0].score <= 6 }, { star2: data.newItems[0].score > 6 && data.newItems[0].score < 8 }, { star1: data.newItems[0].score >= 8 } ]"></span>
<span class="icon" :class="[ { star0: data.newItems[0].score <= 8 }, { star2: data.newItems[0].score > 8 && data.newItems[0].score < 10 }, { star1: data.newItems[0].score >= 10 } ]"></span>

스코어가 0점이면 'star0'삽입, 0보다 크고 2보다 작으면 'star2'삽입, 2와 같거나 2보다 크면 'star1'삽입

...

 

:: 조건이 3개 이상 들어가야 하는 부분에서 사용

---

 

클래스 바인딩 기본기

data: {
    isActive: true,
    noActive: false
}

<div :class="{active: isActive, 'active-a': noActive}"></div>

-가 있을때는 ' '를 붙여준다. =>

<div class="active"></div>

 

객체 사용

data: {
    classObject {
        isActive: true,
        noActive: false
    }
}

<div :class="classObject"></div>

결과는 위와 같다.

 

객체를 반환하는 계산된 속성에 바인딩

data: {
    isActive: true,
    error: null
},
computed: {
    classObject: function() {
    	return {
            active: this.isActive && !this.error,
            'text-danger': this.error && this.error.type === 'fatal'
        }
    }
}

<div :class="classObject"></div>

이 결과도 위와 같다.

 

배열구문

data: {
    classActive: 'active',
    classError: 'text-danger'
}

<div :class="[classActive, classError]"></div>

=>

<div class="active text-danger"></div>

 

3항 연산자

<div :class="[isActive ? classActive : '', classError]"></div>

classError부분은 항상 적용시키고, isActive가 true일 때 classActive를 false일 때 ' '를 적용한다.