Работа с атрибутами в фреймворке Vue

Вставлять значения свойств из data можно не только в текст, но и в атрибуты тегов.

Это делается с помощью директивы v-bind, вот таким образом: v-bind:имяАтрибута="значение атрибута".

То есть, к примеру, атрибут id мы установим следующим образом:

<тег v-bind:id="ай ди элемента">
А атрибут class - следующим:

<тег v-bind:class="класс элемента">
Пусть, к примеру, в свойстве str хранится строка 'header':

let app = new Vue({
el: '#app',
data: {
str: 'header',
},
});
Давайте сделаем так, чтобы у нас получился абзац с id="header". Для этого напишем директиву v-bind:id и привяжем к ней свойство str:

<div id="app">
<p v-bind:id="str">Абзац</p>
</div>
Результатом этого кода будет следующий HTML:

<div id="app">
<p id="header">Абзац</p>
</div>
Зачем нам вообще нужно такое привязывание: мы можем поменять значение свойства str - и id нашего элемента также мгновенно поменяется. Такое поведение мы сможем использовать для всякого рода полезных вещей.

Атрибут disabled
Кроме обычных атрибутов, мы можем устанавливать атрибуты, не требующие значения, например, атрибут disabled. Чтобы этот атрибут добавился в элемент, мы должны установить v-bind:disabled в значение true, а чтобы не добавился - в значение false.

Давайте попробуем на практике.

Пусть у нас есть переменная isDisabled, которая может принимать значением или true, или false. Пусть у нас также есть кнопка. Давайте сделаем так, чтобы эта кнопка была заблокирована, если isDisabled равна true, и отблокирована, если false.

Реализуем:

let app = new Vue({
el: '#app',
data: {
isDisabled: true,
},
});
<div id="app">
<button v-bind:disabled="isDisabled">Кнопка</button>
</div>
При запуске этого кода кнопка изначально будет заблокирована. А если вы поменяете isDisabled на false - она отблокируется.