I am aware of the JavaScript ternary operator condition? optionA : optionB and now I am seeing {{option: condition}} in Vue, and the behaviour seems to be that if condition holds the assignment is option, otherwise the assignment is empty. Is this 'binary' operator : something general for JS or particular to Vue?

The actual code:

<span :>{{ todo.text }}</span>

where

.done { text-decoration: line-through; }

is a CSS and todo.done is a boolean.

CodePudding user response：

It's not an operator but regular object literal syntax. Vue class attribute supports objects for conditional class lists, where boolean value determines whether class name from a key is added to a list or omitted.

This behaviour is similar to popular classnames package that serves the same purpose in React ecosystem.

CodePudding user response：

I think its a vue thing, never seen that elsewhere