어떻게 동시에 두 개의 클래스를 묶을 수 있을까요?

어떻게 동시에 두 개의 클래스를 묶을 수 있을까요?

요소가 현재인 경우 배경색을 파란색으로 만들어야 합니다(bg-blue-400, 녹색 배경 ( )bg-green-400) - 완료, 어둡게(bg-dark-400) - 미완료 (1개만 활성화 가능)원하는 예:

내 코드:

<div v-bind:class="{'bg-blue-400' : isSelected(task), 'bg-grey-400' : isNotCompleted(task)}" 
class="icon-block s30 text-white" >{{index+1}}</div>

결과:

이러한 논리를 템플릿이 아닌 스크립트태그에 넣습니다.

동작 유형에 따라 계산된 속성 또는 메서드에 논리를 넣을지 선택해야 합니다.(작업이 변경될 때 css 클래스를 변경하시겠습니까?라는 질문을 자신에게 던집니다.그 이외의 방법으로 계산 속성을 사용한다.)

v-for를 사용하므로 향상된 또 다른 기능은 개별 작업을 구성 요소에 넣는 것입니다.

태스크 컴포넌트:

<task v-for="task in tasks" :task="task"></task>

작업 구성 요소:

<template>
    <div v-bind:class="cssClass">
    <p> {{ task.name }} </p>
    </div>
</template>

<script>
    computed: {
      cssClass: function () {
        return {
         'bg-blue-400' if this.task.selected
        }
      }
    }
</script>

언급URL : https://stackoverflow.com/questions/43234869/how-to-bind-2-classes-at-the-same-time