如果元素是当前的(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>
结果:
答案 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>