Vue3 v-bind Directive
Vue3 Built-in Directivesv-bindThe directive is used to dynamically bind attributes or component props, making attribute values responsive to data changes.
Basic Description
v-bindThe directive is used to dynamically bind one or more attributes to an expression. It allows attribute values to be dynamic rather than fixed strings.
- Shorthand: : or . (when using prop modifier)
- Expected Type: any (with argument) | Object (without argument)
- Purpose: Dynamically binds attributes or props.
Basic Usage
Example
<!-- Full syntax -->
<img v-bind:src="imageSrc" />
<!-- Shorthand -->
<img :src="imageSrc" />
<img v-bind:src="imageSrc" />
<!-- Shorthand -->
<img :src="imageSrc" />
Example
<template>
<div>
<img :src="currentImage" :alt="imageAlt" />
<button @click="changeImage">Switch Image</button>
</div>
</template>
<script>
export default {
data() {
return {
currentImage: '/images/photo1.jpg',
imageAlt: 'Landscape image'
}
},
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">Switch Image</button>
</div>
</template>
<script>
export default {
data() {
return {
currentImage: '/images/photo1.jpg',
imageAlt: 'Landscape image'
}
},
methods: {
changeImage() {
this.currentImage = this.currentImage === '/images/photo1.jpg'
? '/images/photo2.jpg'
: '/images/photo1.jpg'
}
}
}
</script>
Dynamically Binding class and style
Example
<!-- Dynamically bind class -->
<div :class="{ active: isActive }">Content</div>
<!-- Dynamically bind style -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Style</div>
<div :class="{ active: isActive }">Content</div>
<!-- Dynamically bind style -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Style</div>
Other Extensions