如何同时绑定2个类？

Question

如果元素是当前的（bg-blue-400），绿色背景（bg-green-400） - 已完成，黑暗（bg-dark-400） - 未完成（只有一个可以被激活），我需要将背景颜色设为蓝色）。示例我想要的：

我的代码：

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

结果：

Answer 1

将此类逻辑放在脚本标记中，而不是放在模板中。

根据您希望的行为类型，您需要在将逻辑放入计算属性或方法之间进行选择。 （问问自己这个问题：你希望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>