VueJS format ternary expression

Question

I am using VueJS and it has expression like below:

{{ item.recommendation ? "PS4" : "Xbox" }}

How can I style "PS4" into red color or "Xbox" into blue color in the expression? In another words, how to include CSS style into the expression.

user_11554326 · Answer

you can try like this way

 :class="sitem.recommendation ? 'is-primary' : 'is-info' "

user_12171756 · Answer

You can bind a class:

:class="condition ? 'classA' : 'classB'"

Or you can bind a style:

:style="condition ? {color: 'red'} : {color: 'blue'}"