Директива v-bind в Vue3
Встроенные директивы Vue3v-bindДиректива используется для динамической привязки атрибутов или props компонента, делая значения атрибутов реактивными на изменения данных.
Базовое описание
v-bindДиректива используется для динамической привязки одного или нескольких атрибутов к выражению. Она позволяет значениям атрибутов быть динамическими, а не фиксированными строками.
- Сокращённая запись: : или . (при использовании модификатора prop)
- Ожидаемый тип: any (с аргументом) | Object (без аргумента)
- Назначение: Динамически привязывает атрибуты или props.
Базовое использование
Пример
<!-- Полный синтаксис -->
<img v-bind:src="imageSrc" />
<!-- Сокращённая запись -->
<img :src="imageSrc" />
<img v-bind:src="imageSrc" />
<!-- Сокращённая запись -->
<img :src="imageSrc" />
Пример
<template>
<div>
<img :src="currentImage" :alt="imageAlt" />
<button @click="changeImage">Сменить изображение</button>
</div>
</template>
<script>
export default {
data() {
return {
currentImage: '/images/photo1.jpg',
imageAlt: 'Пейзажное изображение'
}
},
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">Сменить изображение</button>
</div>
</template>
<script>
export default {
data() {
return {
currentImage: '/images/photo1.jpg',
imageAlt: 'Пейзажное изображение'
}
},
methods: {
changeImage() {
this.currentImage = this.currentImage === '/images/photo1.jpg'
? '/images/photo2.jpg'
: '/images/photo1.jpg'
}
}
}
</script>
Динамическое связывание class и style
Пример
<!-- Динамическое связывание class -->
<div :class="{ active: isActive }">Содержимое</div>
<!-- Динамическое связывание -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Стиль</div>
<div :class="{ active: isActive }">Содержимое</div>
<!-- Динамическое связывание -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Стиль</div>
Другие расширения