Condiciones y Clases Dinámicas en Vue.js

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:46

Condiciones y Clases Dinámicas en Vue.js

Curso Básico de Vue.js 2

Clase 10 de 38

Clase 10 / 38

Recursos

¿Cómo utilizar v-bind:class para manipular el estilo de una aplicación en tiempo real?

La habilidad de cambiar el estilo de una aplicación en tiempo real es esencial para un desarrollo web atractivo y reactivo. En este contexto, v-bind:class se convierte en una herramienta crucial al permitir modificar las clases CSS de un elemento según condiciones dinámicas. A continuación, exploraremos cómo implementar esta técnica utilizando Vue.js.

¿Cómo determinar el color basado en condiciones dinámicas?

Para empezar, podemos usar una expresión ternaria en v-bind:class para asignar clases en función de un condicional. Esta técnica permite cambiar dinámicamente el color de una palabra, como "Bitcoin" en nuestra aplicación.

Definir la lógica condicional en el HTML:
```
<h1 v-bind:class="check > 0 ? 'green' : 'red'">Bitcoin</h1>
```
Aquí, la clase green se aplica si check es mayor a cero, de lo contrario, se utiliza la clase red.

Definir las clases CSS en el archivo .css:

.green {
    color: green;
}
.red {
    color: red;
}

¿Cómo utilizar objetos en v-bind:class?

Otra poderosa característica de Vue.js es el uso de objetos con v-bind:class para aplicar clases CSS basadas en ciertas condiciones booleanas.

Definición de la variable de control en JavaScript:

Ejecutamos una comparación del precio del "Bitcoin" frente al precio actual.
```
data: {
    price: 8500
}
```
Implementación del objeto en el HTML:
```
<div v-bind:class="{ 'orange': price === item.price, 'redHot': item.price < price, 'green': item.price > price }">
    {{ item.price }}
</div>
```
- La clase orange se aplica si item.price es igual al precio actual.
- La clase redHot se aplica si item.price es menor.
- La clase green si es mayor.

¿Se pueden combinar v-bind:class con clases CSS estándar?

Absolutamente, es posible combinar clases estáticas y dinámicas dentro de un mismo elemento, lo que puede resultar en un control sofisticado del estilo.

Ejemplo de combinación de clases:
```
<div class="uppercase" v-bind:class="{ 'dynamicClass': condition }">
    Contenido
</div>
```
Aquí, uppercase se aplica de manera estática transformando el texto a mayúsculas, mientras que dynamicClass dependerá del estado de condition.

Esta flexibilidad permite a los desarrolladores de Vue.js crear interfaces más intuitivas y débiles al responder dinámicamente a cambios en datos o estados de la aplicación. Es una técnica común y valiosa para gestionar la apariencia en aplicaciones con datos en tiempo real o aplicaciones avanzadas con múltiples interacciones.

Miguel Angel Reyes Moreno

Hace 5 años

Clases en tiempo real

Podemos usar condicionales para mostrar distintos estilos en la UI con las clases de CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Primera Vue</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="app">

    <img
      v-on:mouseover="toggleShowPrices"
      v-on:mouseout="toggleShowPrices"
      v-bind:src="img"
      v-bind:alt="Bitcoin"
    >
    <h1
      v-bind:class="changePercent > 0 ? 'green' : 'red'">
      {{ name }}
      <span v-if="changePercent > 0">🤑</span>
      <span v-else>🤯</span>
      <button v-on:click="toggleShowPrices">
        {{ showPrices? '🙈' : '🐵' }}
      </button>
    </h2>

    <ul v-show="showPrices">
      <li
        class="uppercase"
        v-bind:class="{
          green: p.value > price,
          orange: p.value === price,
          red: p.value < price,
        }"
        v-for="(p, index) in pricesWithDays"
        v-bind:key="p.day">
        {{index}} - {{ p.day }} - {{ p.value }}
      </li>
    </ul>

  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="app.js"></script>
</body>
</html>

img {
  width: 100px;
}

.red {
  color: red;
}

.green {
  color: green;
}

.orange {
  color: orange;
}

.uppercase {
  text-transform: uppercase;
}

new Vue({
  el: '#app',

  data() {
    return {
      name: 'Bitcoin',
      img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
      changePercent: 10,
      price: 8400,
      pricesWithDays: [
        { day: 'Lunes', value: 8400 },
        { day: 'Martes', value: 7900 },
        { day: 'Miercoles', value: 8200 },
        { day: 'Jueves', value: 9000 },
        { day: 'Viernes', value: 9400 },
        { day: 'Sabado', value: 10000 },
        { day: 'Domingo', value: 10200 },
      ],
      showPrices: false,
    }
  },
  methods: {
    toggleShowPrices() {
      this.showPrices = !this.showPrices;
    }
  }
});

Erick Alpuche

Hace 5 años

Tu comentario me hice darme cuenta que tenía un error en mi código, bendito seas!

Comentarios (41)41 comentarios

jonathan sanchez

Hace 7 años

Deivi Alfredo Arocutipa Serrano

Abril Darynka Tapia Sosa

Abner Daniel Saavedra Farías

David Behar

Hace 6 años

Carlos Eduardo Gomez García

Andrés Felipe Lopez gomez

Esteban Molina Gomez

Jimmy Buriticá Londoño

Jose L. Figueroa

Fernando Andres Muñoz Suazo

Damian Ladiani

Roberto Shirásago Domínguez

Nahuel Castro

Sebastian Diaz

Juan Guillen Fortich

Gonzalo Pimentel

Elvis Milan

Arlex Felipe Llanos Betancourt

Victor Barrios Alvarez

Eduardo Pech

Johnnatan Reyes Garcia

David Campos

Isabella Susana

Leonel Moyano

Santiago Lopera Naranjo

Manuel Ojeda

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Condiciones y Clases Dinámicas en Vue.js