2つのクラスを同時にバインドする方法は？

Question

要素が最新（bg-blue-400）、緑色の背景（bg-green-400） - 完了、暗い（bg-dark-400） - 未完了（1つだけ起動可能）の場合は、背景色を青にする必要があります。私が欲しいもの例：

マイコード：

<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クラスを変更したいのですか？そうでなければ計算されたプロパティを使用します）コンポーネントのタスク。

タスクコンポーネント：

<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>