CODEWITHSUNDEEP
vue.jsvuejs2
margherita pizza
margherita pizza

Reputation: 7145

Vue js bind multiple style properties to an element

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?

Upvotes: 6

Views: 11613

Answers (2)

hamid niakan
hamid niakan

Reputation: 2851

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:

vue style binding, Object syntax

vue style binding, Array syntax

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

:style="[styleObjectOne, styleObjectTwo]"

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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' 
 }"

Upvotes: 14

Related Questions