No tienes acceso a esta clase

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

Atributos reactivos

7/23
Recursos

Aportes 13

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Hola, les dejo el link de la imagen por si quieren usar la misma 馃榿

https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ

interesante como se puede cambiar hasta el comportamiento de los atributos.
el shortcut para "v-bind: " es " : " por tanto podria ser asi:

<img :src="img" :alt="alt">

Tambi茅n me funciona haciendolo con la sintaxis de objeto de atributos:

<img v-bind="{'src':img, 'alt':img}">

v-bind: es una directiva que se pone antes del atributo al cual su valor quiero cambiar dinamicamente. una conjugacion para "v-bind: " es " : "

Se puede utilizar:

  v-bind:class=" variable_vue = 'clase' "

conjugado seria

:class=" variable_vue = 'clase'  "

se puede utilizar con objetos v-bind:class="{鈥榗lase鈥 : vue_variable}"

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

Responder

Creo que una potencialidad del v-bind la alcanc茅 a ver en el trabajo cuando toda la informaci贸n que se consum铆a para generar im谩genes din谩micas ven铆a de la base de datos y la data que recib铆amos era un objeto de configuraci贸n. Accediendo a las propiedades pod铆amos darle mucho dinamismo a los templates! y esto aplica para todo!

Url para im谩genes random: https://picsum.photos/200/300

Que buena la explicaci贸n de esta clase de v-bind! 馃憤锔

De verdad este curso es una joyita. Es incre铆ble lo simple que es la explicaci贸n y se agredece qu茅 explique conceptos super b谩sicos.

Otra forma de hacer bind. Es a trav茅s de objetos en Vue:

const vm = createApp({
    data() {
      return {
          imagen: {
            attr: 'src',
            textoalternativo: 'alt',
            texto: 'Myimagen',
            img: "https://i.picsum.photos/id/0/5616/3744.jpg?hmac=3GAAioiQziMGEtLbfrdbcoenXoWAW-zlyEAMkfEdBzQ",
          }
        
        //message: 'Hello Vue'
      }
    },
    template : `<img :[imagen.attr]="imagen.img" :alt="imagen.texto" style="width:500px;"/>`
    //template: `<div v-text="message"></div>`
  }).mount('#app')

lo de los atributos dinamicos me 馃く

No sab铆a que pod铆amos usar atributos din谩micos 馃槷

Que bueno ese plus de vue 3, de permitir pasarle a v-bind variables, esto permite hacer cambios mas din谩micos en los atributos de una etiqueta html.
una nueva mec谩nica que nos puede ayudar a codificar alguna necesidad de forma mas f谩cil.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="Description" content="Extended Description">
    <meta name="robots" content="index,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document Title</title>
    <link rel="stylesheet" href="">

    <style>
        img {
            width: 25%;
            height: 25%;
            margin: 12px;
        }
    </style>

</head>

<body>
    <script src="https://unpkg.com/[email protected]"></script>

    <div id="app">
    </div>

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    img: 'https://i.picsum.photos/id/1/5616/3744.jpg?hmac=kKHwwU8s46oNettHKwJ24qOlIAsWN9d2TtsXDoCWWsQ',
                    alt: 'Laptop',
                    attr: 'src',
                };
            },
            // v-bind: es para que el atributo sea reactivo
            // v-bind:attr="var-value"
            // v-bind:[var-attr]="var-value"
            template: `<img v-bind:src="img" v-bind:alt="alt">
            <img v-bind:[attr]="img" v-bind:alt="alt">`,
        }).mount('#app');
    </script>

</body>

</html>