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 :class="{ done: todo.done }">{{ todo.text }}</span>
where
.done { text-decoration: line-through; }
is a CSS and todo.done is a boolean.
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.
If you wanted a binary operator, you should choose ||. This object syntax is not specific to vue but the usage is: What this code is saying is "Set the attribute done of the object bound to the class to todo.done, and vue will infer to add or not to add the class of the object parameter (in your case it is done).