Expresiones JavaScript en templates Vue

Aprende a transformar HTML estático en vistas dinámicas con Vue, usando datos reactivos y expresiones de JavaScript dentro del template. Verás cómo definir un objeto de producto, formatear precios con Intl, reemplazar contenido con dobles llaves y validar estados como el stock directamente en la vista. Todo con una sintaxis clara y lista para producción.

¿Cómo pasar de HTML estático a un template dinámico en Vue?

En Vue, el HTML que forma parte de la aplicación es dinámico. Dentro del template puedes escribir expresiones de JavaScript usando dobles llaves {{ }} y el motor las evalúa con acceso a la data reactiva.

• Reemplaza valores estáticos con expresiones: {{ product.name }}.
• Cualquier expresión válida de JavaScript funciona dentro de {{ }}.
• La data se define en data() y regresa un objeto con el estado dinámico.

¿Cómo definir la data reactiva de un producto?

El estado mínimo incluye nombre, precio, stock, descripción y una galería de imágenes con su thumbnail. Un ejemplo basado en la explicación:

export default {
  data() {
    return {
      product: {
        name: 'Cámara',
        price: 450_000, // guiones bajos para legibilidad en números grandes.
        stock: 0,
        content: `Descripción larga del producto en un template string.`,
        images: [
          { image: 'camera.jpg', thumbnail: 'images/camera-thumb.jpg' },
          { image: 'camera2.jpg', thumbnail: 'images/camera2-thumb.jpg' }
        ]
      }
    }
  }
}

• price admite separadores con guion bajo y sigue siendo número entero.
• content puede venir de un template string para respetar saltos de línea.
• images es un arreglo de objetos con image y thumbnail.

¿Cómo reemplazar contenido estático con dobles llaves?

• Título y etiquetas: {{ product.name }}.
• Precio: {{ product.price }}.
• Descripción: {{ product.content }}.

Consejo práctico: todo lo que está en {{ }} se evalúa como JavaScript. Puedes encadenar métodos o validaciones.

¿Cómo formatear números y transformar texto en el template?

El formateo de precios mejora la lectura y se logra con la interfaz de JavaScript llamada Intl.

• Formateo local: {{ new Intl.NumberFormat('es-CO').format(product.price) }}.
• Cambio de separadores por configuración regional: es-CO usa punto para miles; en inglés se usan comas.
• Transformación de texto: {{ product.name.toUpperCase() }} para mostrar en upper case.

Ejemplo integrado:

<h2>{{ product.name.toUpperCase() }}</h2>
<p class="price">
  {{ new Intl.NumberFormat('es-CO').format(product.price) }}
</p>

• Mejora la legibilidad de valores grandes.
• Permite mostrar variaciones sin mutar la data original.

¿Cómo validar estados como el stock desde el template?

Las expresiones permiten mostrar indicadores de disponibilidad directamente con un condicional.

<span class="stock">
  {{ product.stock === 0 ? '😢' : '😎' }}
</span>

• product.stock === 0 muestra una carita triste si no hay unidades.
• Cambia el valor del stock y la vista reacciona de inmediato.
• Es una validación simple y clara en el template.

¿Qué habilidades y conceptos clave se trabajan?

• Data reactiva con data() para estado dinámico.
• Uso de dobles llaves para evaluar JavaScript en el template.
• Formateo numérico con Intl.NumberFormat según localización.
• Transformaciones en línea como toUpperCase().
• Condicionales en el template para señales de disponibilidad.
• Manejo de arreglos de imágenes con image y thumbnail.

¿Te gustaría ver cómo llevar estas expresiones a atributos de HTML (por ejemplo, src, alt o clases dinámicas)? Deja tu comentario y cuéntame qué parte quieres profundizar primero.