vue.js - 如何同时绑定(bind)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>