• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

31
Views
How to have different colors for different list items in Vue.js?

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?

about 1 month ago ·

Juan Pablo Isaza

1 answers
Answer question

0

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

about 1 month ago · Juan Pablo Isaza Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.