¿Soy consciente de la condition? optionA : optionB
y ahora estoy viendo {{option: condition}}
en Vue, y el comportamiento parece ser que si condition
contiene la asignación es option
, de lo contrario, la asignación está vacía. ¿Es este operador 'binario' :
algo general para JS o particular para Vue?
El código real:
<span :class="{ done: todo.done }">{{ todo.text }}</span>
dónde
.done { text-decoration: line-through; }
es un CSS y todo.done
es un booleano.
No es un operador sino una sintaxis literal de objeto regular. El atributo de class
Vue admite objetos para listas de clases condicionales, donde el valor booleano determina si el nombre de clase de una clave se agrega a una lista o se omite.
Este comportamiento es similar al popular paquete de classnames
de clase que tiene el mismo propósito en el ecosistema React.
Si desea un operador binario, debe elegir ||
. Esta sintaxis de objeto no es específica de vue, pero el uso es: Lo que dice este código es "Establezca el atributo done
del objeto vinculado a la clase en todo.done
, y vue inferirá agregar o no agregar la clase del parámetro de objeto (en su caso está done
).