No tienes acceso a esta clase

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

Estilos en tiempo real

11/38
Recursos

Aportes 29

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

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

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 鈥渃osillas鈥 de javaScript.

Excelenteee!! Cada d铆a me enamoro mas de Vue Js, la mejor decisi贸n f煤e comenzar a estudiar Vue, lo mejooor

Waaaooo, que espect谩culo todo lo que se puede hacer con pocas lineas de c贸digo. Vue es mi primer framework 馃挭

Fiesta de color con mouseover

nuevamente podemos apreciar q la palabra reservada this. se usa para referenciar un atributo dentro del objeto.

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!

Ojo! aqu铆 es importante recalcar que para los estilos de css dentro del objeto de JS en 鈥渧-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)

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茅?