如何同时绑定2个类?

时间:2017-04-05 14:59:34

标签: vue.js vuejs2

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

enter image description here

我的代码:

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

结果:

enter image description here

1 个答案:

答案 0 :(得分:2)

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

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