如何同時綁定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個類？

回答

相關問題