Directive v-bind de Vue3
Vue3 Directives intégréesv-bindLa directive est utilisée pour lier dynamiquement des attributs ou des props de composant, rendant les valeurs d'attribut réactives aux modifications des données.
Description de base
v-bindLa directive est utilisée pour lier dynamiquement un ou plusieurs attributs à une expression. Elle permet aux valeurs d'attribut d'être dynamiques plutôt que des chaînes fixes.
- Raccourci: : ou . (lors de l'utilisation du modificateur prop)
- Type attendu: any (avec argument) | Object (sans argument)
- Objectif: Lie dynamiquement des attributs ou des props.
Utilisation de base
Exemple
<!-- Syntaxe complète -->
<img v-bind:src="imageSrc" />
<!-- Raccourci -->
<img :src="imageSrc" />
<img v-bind:src="imageSrc" />
<!-- Raccourci -->
<img :src="imageSrc" />
Exemple
<template>
<div>
<img :src="currentImage" :alt="imageAlt" />
<button @click="changeImage">Changer l'image</button>
</div>
</template>
<script>
export default {
data() {
return {
currentImage: '/images/photo1.jpg',
imageAlt: 'Image de paysage'
}
},
methods: {
changeImage() {
this.currentImage = this.currentImage === '/images/photo1.jpg'
? '/images/photo2.jpg'
: '/images/photo1.jpg'
}
}
}
</script>
<div>
<img :src="currentImage" :alt="imageAlt" />
<button @click="changeImage">Changer l'image</button>
</div>
</template>
<script>
export default {
data() {
return {
currentImage: '/images/photo1.jpg',
imageAlt: 'Image de paysage'
}
},
methods: {
changeImage() {
this.currentImage = this.currentImage === '/images/photo1.jpg'
? '/images/photo2.jpg'
: '/images/photo1.jpg'
}
}
}
</script>
Liaison dynamique de class et style
Exemple
<!-- Liaison dynamique de class -->
<div :class="{ active: isActive }">Contenu</div>
<!-- Liaison dynamique de style -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Style</div>
<div :class="{ active: isActive }">Contenu</div>
<!-- Liaison dynamique de style -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Style</div>
Autres extensions