Vue3 v-bind-Direktive
Vue3 Eingebaute Direktivenv-bindDie Direktive wird verwendet, um Attribute oder Komponenten-Props dynamisch zu binden, wodurch Attributwerte auf Datenänderungen reagieren.
Grundlegende Beschreibung
v-bindDie Direktive wird verwendet, um ein oder mehrere Attribute dynamisch an einen Ausdruck zu binden. Sie ermöglicht, dass Attributwerte dynamisch und nicht feste Zeichenketten sind.
- Kurzschreibweise: : oder . (bei Verwendung des Prop-Modifikators)
- Erwarteter Typ: any (mit Argument) | Object (ohne Argument)
- Zweck: Bindet Attribute oder Props dynamisch.
Grundlegende Verwendung
Beispiel
<!-- Vollständige Syntax -->
<img v-bind:src="imageSrc" />
<!-- Kurzschreibweise -->
<img :src="imageSrc" />
<img v-bind:src="imageSrc" />
<!-- Kurzschreibweise -->
<img :src="imageSrc" />
Beispiel
<template>
<div>
<img :src="currentImage" :alt="imageAlt" />
<button @click="changeImage">Bild wechseln</button>
</div>
</template>
<script>
export default {
data() {
return {
currentImage: '/images/photo1.jpg',
imageAlt: 'Landschaftsbild'
}
},
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">Bild wechseln</button>
</div>
</template>
<script>
export default {
data() {
return {
currentImage: '/images/photo1.jpg',
imageAlt: 'Landschaftsbild'
}
},
methods: {
changeImage() {
this.currentImage = this.currentImage === '/images/photo1.jpg'
? '/images/photo2.jpg'
: '/images/photo1.jpg'
}
}
}
</script>
Dynamisches Binden von class und style
Beispiel
<!-- class dynamisch binden -->
<div :class="{ active: isActive }">Inhalt</div>
<!-- style dynamisch binden -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Stil</div>
<div :class="{ active: isActive }">Inhalt</div>
<!-- style dynamisch binden -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Stil</div>
Andere Erweiterungen