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
Introducción
¿Qué es Vue.js?
Fundamentos de componentes
Configuración del entorno
Primer contacto
Renderizado declarativo
Interpolación de datos
Interpolación de datos 2
Atributos reactivos
Input de usuario
Eventos de usuario
Inputs reactivos
Reactividad
Propiedades computadas
Watchers
Estilos reactivos
Listas y condicionales
Condicionales
Listas
Componentes personalizados
Componentes
Slots
Comunicación entre componentes
Comunicación de componente padre a hijo
Comunicación de componente hijo a padre
Custom v-model
Comunicación con componentes profundos
Componentes en el Virtual DOM
Instancias de componentes
Cierre del curso
Vue progresivo
Esto es solo el comienzo
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
Atributos reactivos
7/23Recursos
Aportes 13
Preguntas 1
Ordenar por:
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="{‘clase’ : 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>
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.