如何為 Vue.js 中的不同列表項設置不同的 colors？

Question

我正在嘗試使用 javascript（vue.js 和 node.js）做一個任務列表，其中列表的元素根據它們的屬性具有不同的 colors。 例如，如果列表中的某個項目的屬性日期與當前日期相距不到三天，則背景顏色為紅色，並且列表中的項目的日期與當前日期相距三天以上有綠色背景顏色。 這有可能實現這一目標嗎？

Answer 1

您將創建一個方法來獲取您的項目並返回樣式或 class 字符串、object 或數組。 然后將返回值綁定到您的樣式或 class。

<div :style='getStyle(item)' :class='getClass(item)' />

getStyle(item) {
   // your logic returning a style object
}

getClass(item) {
   // your logic returning a string, string array, or object.
}

您可以在此處找到更多詳細信息： https://v2.vuejs.org/v2/guide/class-and-style.html