Vue js bind multiple style properties to an element

Question

This would bind background-color property to the <td> element.

    <td :style="{backgroundColor: (props.item.release_date ? 'green' : 'transparent' ) }">
Some text
</td>

But what if I want to bind NOT ONLY the backgound-color same time I want to bind the foreground color (Normal color property) as well.

How do I bind multiple style properties to an element?

Bhojendra Rauniyar · Accepted Answer · 2018-12-05 06:41:56Z

14

First of all, there's no foreground color in css. You can use multiple style with comma separated key: value pairs like:

:style="{
   backgroundColor: (props.item.release_date ? 'green' : 'transparent' ), 
   color: 'red', 
   width: '120px' 
 }"

answered Dec 5, 2018 at 6:41

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 03:04:36Z

2

I was in a situation where I couldn't put all the styles in one object so I found this alternate way of style binding in vue:

basically you can have multiple style object and pass them as array to the style attribute like this:

:style="[styleObjectOne, styleObjectTwo]"

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 31, 2021 at 10:05

hamid niakan

2,8891 gold badge15 silver badges26 bronze badges