如何同时绑定2个类？

如果元素是当前的（bg-blue-400），绿色背景（bg-green-400） - 完成，黑暗（bg-dark-400） - 未完成（只有一个可以被激活），我需要使背景颜色为蓝色。例如我想要什么：如何同时绑定2个类？

我的代码：

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

结果：

来源

2017-04-05 MAXIMAN

第一：结束你的第一行'isNotCompleted（任务） “'和'isNotCompleted（任务）}”' – SLYcee

结束，但相同的结果 – MAXIMAN

为什么不把这个逻辑放在模板内，而是在一个方法内（计算）？，然后返回css类名作为结果。 –

把这种逻辑的脚本标签内，而不是你的模板内。

根据您想要的行为类型，您需要在将逻辑放入计算属性或方法之间进行选择。（问问自己以下问题：当你的任务改变时，你想让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>

来源

2017-04-05 15:09:52

如何同时绑定2个类？

回答

相关问题