Загрузка...
Загрузка...
Продолжая работу с платформой, вы принимаете условия Политики конфиденциальности и использование файлов cookie.
👋 Привет! Я Дастан, автор Hack Frontend. Всегда рад профессиональному нетворкингу => добавляйся в LinkedIn.
Привязки атрибутов во Vue.js позволяют динамически устанавливать значения HTML‑атрибутов или пропсов компонентов на основе данных. Для этого используется директива v-bind или её краткий синтаксис :.
<a v-bind:href="url">Ссылка</a>
<a :href="url">Ссылка</a>
<template>
<button
:disabled="isLoading"
:title="tooltipText"
v-bind:data-id="item.id"
>
{{ isLoading ? "Загрузка..." : "Отправить" }}
</button>
</template>
<script>
export default {
props: {
url: String,
item: Object,
isLoading: Boolean,
tooltipText: String
}
};
</script>
Не путать с обычной строкой:
Запись <button disabled="isLoading"> не сработает — без v-bind или : Vue не интерпретирует значение как переменную.
<template>
<img v-bind="imageAttrs" />
</template>
<script>
export default {
data() {
return {
imageAttrs: {
src: "logo.png",
alt: "Логотип",
width: 100,
height: 50
}
};
}
};
</script>
Note:
Vue автоматически распределит все поля объекта imageAttrs как атрибуты <img>.
В data или props компонента задайте переменные для атрибутов.
Добавьте :атрибут="выражение" к нужному элементу.
Пишите :href="url", а не :href="'url'" — иначе оно станет строкой.
Note:
Для привязки классов и стилей есть отдельные директивы :class и :style, но они тоже реализованы через v-bind.
Узнайте подробности в официальной документации Vue: Attribute Binding