I'm trying to do a task list using javascript (vue.js and node.js) where the elements of the list have different colors based on their properties. For example, if an item in the list has a property date that is less than three days away from the current date to have a red background color and items of the list that have dates that are more than three days away from the current date to have green background color. Is this possible to achieve this?
You would create a method that takes your item and returns a style or class string, object or array. Then bind the return value to your style or 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.
}
You can find more details here: https://vuejs.org/v2/guide/class-and-style.html