Para bindear alguna propiedad, como en este caso usamos v-bind:class podemos utilizar el atajo :, por lo que si queremos bindear la clase podemos utilizar el atajo como: :class, ambas maneras son válidas dentro de Vue.js
Introducción
Qué aprenderás sobre Vue.js 2
El Framework Progresivo
¡Hola Vue!
Rendering Declarativo y Manipulación de DOM
Introducción al Rendering Declarativo
Expresiones y Propiedades
Atributos Dinámicos
Control de Flujo con Directivas
Renderizado de Listas
Manejo de Eventos
Clases en tiempo real
Estilos en tiempo real
Computed Properties y Watchers
Two-Way Data Binding
Ejercicios de práctica módulo 2
Sistema de Componentes
Sistema de Componentes
Crear Componentes Custom
Comunicación entre Componentes: propiedades
Comunicación entre Componentes: eventos
Slots
Ciclo de Vida y Hooks
Antes de continuar, ¡un repaso!
Ejercicios de práctica
Ambiente de Desarrollo
VS Code + Vetur / Chrome / Firefox + Dev Tools
Qué es, cómo usarlo y aplicaciones profesionales con el CLI
Single File Components
Funcionalidades, UI y comandos básicos
Platzi Exchange
Introducción y Setup de Tailwind CSS
Primeros Componentes
Introducción y Setup de Vue Router
Introducción a Fetch y API de Coincap
Mejorar la UI con filtros
Rutas dinámicas
Navegación Programática
Utilizar componentes de terceros
Problemas de Reactividad
Mejorar proyecto: filtros y ordenar
Mejorar proyecto: links y conversión
¡A producción!
Despliegue de la app a Netlify
Rendering Declarativo y Manipulacion de DOM
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Estilos en tiempo real
11/38Recursos
Aportes 29
Preguntas 4
Ordenar por:
Pff!!! me gustaron varias cosas de esta clase, usar el split con un parámetro vació sobre una cadena (nunca lo había hecho), conocer la función reverse, la función join, enterarme que la contraparte del color es la cadena al revese y de paso que v-bind también funciona en style, excelente clase
Es la primera vez que me encuentro con las funciones split(), reverse() y join(). Interesante avanzar con las directivas de Vue y a la vez conocer estas “cosillas” de javaScript.
Excelenteee!! Cada día me enamoro mas de Vue Js, la mejor decisión fúe comenzar a estudiar Vue, lo mejooor
Fiesta de color con mouseover
Waaaooo, que espectáculo todo lo que se puede hacer con pocas lineas de código. Vue es mi primer framework 💪
nuevamente podemos apreciar q la palabra reservada this. se usa para referenciar un atributo dentro del objeto.
Ojo! aquí es importante recalcar que para los estilos de css dentro del objeto de JS en “v-bind:style=”" " se debe usar camelCase o con guiones. por ejemplo: v-bind:style="{backgroundColor: red}" (en lugar de background-color como sería en css)
Se pueden aplicar style directamente a un elemento en el DOM, mediante un objeto:
v-bind:style="{background: '#'+color}"
Me gustó la técnica de cambiar el orden del color f4f4f4 con reverse y de vuelve 4f4f4f un colo mas oscuro.
Cuando intento aplicar el estilo para el cambio de fondo usando vuejs 3 no me permite hacerlo, este solo se aplica para sus elementos hijos. ¿alguien sabe por qué sucede eso?
<div id="root" v-bind:style="{ background: '#' + color }"> // En el elemento raiz no funciona
<div v-bind:style="{ background: '#' + color }"> // aqui si se aplica
// ...code
</div>
</div>
Vue + Laravel = Amor ♥ Este curso me ha hecho amar Vue aun más :3
Gracias profe!
Hacer modo dark de la aplicación
le agregamos emojis que cambian si el valor es igual, mayor o menor de este 😄
esta super bien, es el primer framework de js que estoy aprendiendo, y enserio estos tienen cosas muy cool
Tuve un problema en esta clase. Al momento de hacer el reverse y el join no me cambiaba de color ya que, por alguna razón le agregaba comas. Lo solucioné agregándole un replaceAll(’,’, ‘’) después del join()
this.color = this.color.split('').reverse().join().replaceAll(',', '');
11.-Estilos en tiempo real
this.color = this.color.split(’’).reverse().join(’’)
Estamos diciendo que color se convierta en un array de elementos, luego invertimos el orden de los elementos y por último lo estamos concatenando en un string.
Esto nos permite definir estilos dinámicos, cambiar estilos en tiempo real y poder tener mucha más flexibilidad a la hora de establecer como tiene que lucir nuestra app.
Si en el caso de v-bind:style le pasamos un objeto, este será tomado como la lista de valores CSS para el elemento
Yo creo que para ordenar un poco mejor el código se podrían poner estos objetos dentro de data, no se si funcionaría pero creo que si xD
Increíble lo que se puede hacer con Vue
Manejo de estilos con v-bind
10 puntos!
Tuve que eliminar el # del color en data…
color: 'f4f4f4'
Así funcionó, pues al dejarlo solo en la concatenación del style funciona perfectamente.
Muy importante la delcaracion del color no la terminamos en ; por que esto puede provocar que no se renderize nada
v-bind:style="{background:colorcito}"
Me está encantado la sencillez de Vue 😄
Estilos en tiempo real
Podemos cambiar estilos en tiempo real de forma sencilla:
<!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"
v-bind:style="{ background: '#' + color }">
<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>
new Vue({
el: '#app',
data() {
return {
name: 'Bitcoin',
img: 'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
changePercent: 10,
color: 'f4f4f4',
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;
this.color = this.color.split('').reverse().join(''); //* Tomamos el string del color y le damos la vuelta.
}
}
});
Estilos en tiempo Real
Para agregar estilos en tiempo real se utiliza la directiva v-bind, para ello utilizamos el atributo style y se agrega la propiedad CSS.
<div id="app" v-bind:style="{ background: color }">
cada vez se pone más bueno este curso!! Ya quiero aplicarlo en más proyectos!!! Gracias @Ignacio Anaya !!!
dentro del v-bind, se puede agregar una transition
Bindear los atributos class y style, dan una sensación de dinamicidad al usuario.
Me parece un poco curioso que en vez de colocar background, se coloque background-color y se pinte todo el contenido de color blanco. ¿Alguien sabe por qué?
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?