No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

3 D铆as
10 Hrs
56 Min
13 Seg

Clases en tiempo real

10/38
Recursos

Aportes 37

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

en este video se habla de como podemos modificar el atributo class de una etiqueta usando la directiva v-bind: usando operador ternario, o validando con objetos.

<li
	v-bind:class="{orange: p.price === price, red: p.price < price, green: p.price > price}"
        v-for="(p, i) in pricesWithDay" 
        v-bind:key="p.day">
        {{ i }} - {{ p.day }} - {{ p.price }}
</li>```

En esta clase se mencionan los Operadores Ternarios:
Las operaciones ternarias, o 鈥nested ternaries鈥 en ingl茅s, son expresiones que se utilizan en JavaScript para las condicionales
if... else...

Una expresi贸n en JavaScript como por ejemplo:
if changepercent > 0 { show: 'green' } else { show: 'red' }

Es lo mismo que la siguiente operaci贸n ternaria:
changePercent > 0 ? 'green' : 'red'

Para m谩s informaci贸n sobre el operador, puedes ver la documentaci贸n de Mozilla para developers sobre Operadores condicionales ternarios

El uso de v-bind:class es completamente combinable con class, por lo tanto puedes tener un v-bind:class junto con una clase y no genera error.

Clases en tiempo real:
Usando Alternary
<h1 v-bind:class=鈥渃hangePercent > 0 ? 鈥榞reen鈥: 鈥榬ed鈥欌>{{name}} </h1>
Usando Objetos
v-bind:class="{orange:p.value==price, red:p.value<price, green:p.value>price}"

Para el uso de cualquier atributo que use v-bind, se le puede pasar un objeto y ser谩 interpretado como una serie de condicionales, de esa forma podemos tener varios if鈥檚 ordenados y Vue decidir谩 con cu谩l quedarse seg煤n la condici贸n que pongamos

Me estoy sintiendo muy a gusto con Vue.

Hola Devs:
-Leer la documentacion te ayuda a comprender muy bien lo que nos explica el profesor, lo recomiendo.
*Aca esta la parte de la documentacion que habla del uso de la directiva v-bind con class: Click Aqui

Se pueden generar condiciones para aplicar determinadas clases a los elementos de nuestro DOM. Para ello usamos la directiva v-bind.

v-bind:class="changePercent > 0 ? 'green' : 'red'"

Tambi茅n puede hacerse a trav茅s de objetos:

v-bind:class="{orange: p.value === price, red: p.value < price, green: p.value > price}"

El uso de v-bind:class es totalmente combinable con class sin v-bind, para definir comportamientos por default.

8500 el precio del bitcoin, quiero llorar!!

CLASS (atributo de los estilos) con VUEJS

- Se puede utilizar v-bind:class="variable_vue = 'clase'"
- o se puede utilizar con objetos v-bind:class="{'clase' : vue_variable}"

- Tambien se puede usa v-bind:class="" y class="" al mismo tiempo en un componente de html

Wuao por ahora esto luce muy sencillo!

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>
    </h1>

    <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/[email protected]/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;
    }
  }
});

N煤mero aleatorio para que cambie el changePercent

changePercent: Math.floor(Math.random() * (10 - -10) + -10)

Estoy demasiado sorprendida de lo sencillo que es Vue. 隆Excelente clase!

Con la directiva v-bind es posible a帽adir y quitar clases en elementos HTML.

Para esto hay que a帽adirle a v-bind :class y dentro la clase que queramos a帽adir, se puede combinar con el operador ternario para definir una condici贸n.

Otra forma de definir condiciones es mediante un objeto, donde la clave ser谩 la clase que se aplicar谩 y el valor la condici贸n:

Se pueden crear las condiciones necesarias dentro del objeto como una propiedad m谩s.

Las clases que se a帽adan con Vue pueden convivir perfectamente con clases a帽adidas de la forma com煤n en HTML o CSS.

Excellent!!!

Los atajos como: @click en vez de v-on:click, son una buena pr谩ctica??

Que interesante la forma de colocar condiciones utilizando objetos, genial!

Por si cambiar el texto a naranja, verde o rojo no te funciona, en mi caso era porque las clases con mas de una palabra van entre comillas simples

:class="{'text-orange-500': p.value == price, 'text-red-500': p.value < price, 'text-green-500': p.value > price}"

Estoy haciendo esto en codepen con tailwind

Que emoci贸n! Hasta ahora toda ha sido tan claro y f谩cil con Vue que quiero pasar todos mis proyectos de JS a este framework

En el ejemplo al hacer el binding a la clase no se le agrego comillas simples, si tira error agreguen las comillas a la clase.
Aqui mi ejemplo

<div v-bind:class="{鈥榣ink-success鈥:current_day === pd.day}" class=鈥渇w-bold鈥>{{pd.day}}</div>

No sab铆a que al tener en v-for el mismo nombre de la variable en price en vez de solo p, entra en conflicto y no reconoce los estilos.

Forma incorrecta:

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

Forma correcta:

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

Sorprendido 馃槷

Este diria que es el unico framework de javascript que mas me gusta, es rapido, ligero y con 2 lineas de codigo haces un for que mas podrias pedir ....

Vengo del futuro, espero que todos hayan podido holdear bitcoin 馃

Sabes que el curso es viejo cuando bitcoin vale 8500

Hasta me dan ganas de modificar mis Proyectos y meterles Vue!!!

Clases en Tiempo Real

Usamos la directiva v.bind, pero lo que se hace es utilizar una ternary dentro del atributo class, para determinar con base a una decisi贸n cual es la clase de CSS que se quiere aplicar, las clases lo 煤nico que hacen es cambiar el color del texto.

<h1 
      v-bind:class="changePercent > 0 ? 'green' : 'red'"
>

Cuando se utiliza v-bind con un objeto se determina es que una clase ser谩 aplicada si se da una condici贸n

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

El uso de v-bind:class es perfectamente combinable con class sin v-bind, con ellas se pueden definir el comportamiento default para las clases de un elemento:

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

Se est谩n aplicando el uppercase que es un text transform sobre el elemento HTML, y se aplican tambi茅n los bindings en los atributos class hechos con Vue. Se pueden combinar las clases Default con las clases din谩micas que se vayan agregando.

La directiva v-bind es la misma que ya se hab铆a revisado, que sirve para modificar los elementos o atributos HTML, como un link, source o alt, se est谩 haciendo de la misma manera, pero con las clases se tienen diferentes consideraciones, se puede utilizar una ternary, un string o un objeto.

alternari son validar en una linea

En Vue.js, una directiva es el t茅rmino usado para referirse a algunos atributos especiales, identificados con v-, que le indican a Vue.js que debe realizar ciertos cambios en un elemento del DOM, cada vez que la expresi贸n asociada con dicha directiva cambie.

con base*

  • Excelente

todo esta genial!!! pero por que usan ese tipo de tema鈥 no se aprecia bien, y lastima los ojos!!!

Que interesante 馃槂 鉂わ笍

Las clases que se mencionan en este video est谩n definidas en el styles.css por si alguien se lo pregunta. (Lo clarifico por que en el video no se muestran estas clases)