v-bind

v-bind - это директива, которая динамически привязывает один или несколько атрибутов или входных параметров компонента к выражению

Документация v-bind
Работа с классами и стилями

Полный синтаксис

<template>
  <a v-bind:href="url">Link</a>
</template>

<script setup>
import { ref } from 'vue'
const url = ref('https://vuejs.org')
</script>

Ключевое слово v-bind можно опускать, оставив лишь двоеточие

<template>
  <a :href="url">Link</a>
</template>

<script setup>
import { ref } from 'vue'
const url = ref('https://vuejs.org')
</script>

Если имя атрибута совпадает с названием переменной, то можно опускать имя переменной

<template>
  <a :href>Link</a>
</template>

<script setup>
import { ref } from 'vue'
const url = ref('https://vuejs.org')
</script>

Для атрибутов class или style можно передать объект

Если значение объекта является true, то ключ будет добавлен в атрибут. Значения будут добавляться к существующим значениям, если они переданы

<template>
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
</template>

Для атрибутов class можно передать массив

<template>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
</template>

<script setup>
const isActive = ref(true)
const activeClass = 'active'
const errorClass = 'text-danger'
</script>

Можно не указывать имя свойства, а передать все атрибуты в объекте

<template>
  <a v-bind="{ href: url, target: '_blank' }">Link</a>
</template>

<script setup>
import { ref } from 'vue'
const url = ref('https://vuejs.org')
</script>

В качестве значения может выступать любое валидное JS выражение

<template>
  <a v-bind:href="getUrl('https://vuejs.org')">Link</a>
</template>

<script setup>
function getUrl(url) {
  return url + '/ru'
}
</script>

v-bind так же может использоваться в стилях

<template>
  <a href="https://vuejs.org" class="link">Link</a>
</template>

<script setup>
const color = ref('red')
</script>

<style scoped>
.link {
  color: v-bind(color);
}
</style>
Директивы
Директивы в Vue.js являются специальными атрибутами, которые добавляют функциональность элементам DOM.
Двустороннее связывание