Expresiones en Vue: sintaxis doble llave

Las expresiones en Vue.js permiten representar valores del ViewModel directamente en el HTML para manipular el DOM de forma declarativa. Con llaves dobles, se muestran propiedades, operaciones y resultados de métodos sin lógica de control en el template. Aquí se repasan ejemplos claros: aritmética, concatenación de strings, acceso a objetos, llamadas a métodos y una expresión ternaria como alternativa a if/else.

¿Qué son las expresiones en Vue.js y para qué sirven?

Las expresiones son esos parámetros entre llaves que muestran en pantalla valores del ViewModel. Así, un dato como message se imprime con {{ message }} sin escribir código imperativo.

• Representan propiedades del ViewModel en el HTML.
• Se evalúan de forma segura dentro del template.
• Permiten mostrar resultados de operaciones simples y métodos.

¿Cómo se usan en el HTML del template?

• Se escriben entre llaves dobles: {{ ... }}.
• Renderizan el resultado en el DOM como texto.

<p>{{ message }}</p>

¿Qué operaciones permiten las expresiones: aritmética, concatenación y objetos?

Además de propiedades, se admiten operaciones aritméticas, concatenación de strings, acceso a objetos y llamadas a métodos. Todo se evalúa en tiempo de render.

¿Cómo hacer operaciones aritméticas y concatenación de strings?

• Suma simple para evaluar expresiones numéricas.
• Concatenación para unir strings.

<p>{{ 1 + 1 }}</p>            <!-- Muestra 2. -->
<p>{{ 'Hola' + ' ' + 'Mundo' }}</p>  <!-- Muestra Hola Mundo. -->

¿Cómo acceder a propiedades y llamar métodos de objetos?

• Acceso a propiedades con notación punto.
• Llamada a métodos de strings u objetos.
• Conversión de objeto a texto con JSON.stringify.

<!-- Supongamos que en el ViewModel existe: person = { name: 'Juan' } -->
<p>{{ person.name }}</p>                 <!-- Muestra Juan. -->
<p>{{ person.name.toUppercase() }}</p>   <!-- Convierte a mayúsculas. -->
<p>{{ JSON.stringify(person) }}</p>      <!-- Serializa el objeto. -->

• Acceder a propiedades: person.name.
• Usar métodos: toUppercase sobre un string.
• Serializar: JSON.stringify(person) para ver el objeto como texto.

¿Qué limitaciones existen y cómo usar la expresión ternaria?

Dentro de las llaves no se pueden usar estructuras de control como while, for o if. Sin embargo, sí se permite una expresión ternaria para decidir entre dos valores.

¿Cómo representar un if/else con ternaria?

• Estructura: condición ? valorSiVerdadero : valorSiFalso.
• Útil para alternar resultados simples.

<p>{{ true ? 'true' : 'false' }}</p>

• Sin while/for/if: no se permiten dentro de expresiones.
• Con ternaria: se evalúa una condición y se elige un valor.

¿Tienes otra situación con expresiones en Vue.js que quieras resolver? Comparte tu caso en los comentarios y enriquecemos el ejemplo juntos.