如果元素是当前元素 (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>
结果:
最佳答案
将这种逻辑放在脚本标签中,而不是模板中。
根据您想要的行为类型,您需要在将逻辑放在计算属性或方法中做出选择。 (问你自己这个问题:当你的任务改变时,你想要 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>
关于vue.js - 如何同时绑定(bind)2个类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43234869/