Вставлять значения свойств из 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 нашего элемента также мгновенно поменяется. Такое поведение мы сможем использовать для всякого рода полезных вещей.
Дан абзац. Дано свойство str. Добавьте абзацу в атрибут id значение свойства str.
Атрибут 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 - она отблокируется.
Дан инпут. Сделайте кнопку, нажатие на которую будет по очереди заблокировать и отблокировать наш инпут.
Модифицируйте предыдущую задачу так, чтобы состояние инпута регулировалось чекбоксом: если чекбокс отмечен, то инпут отблокирован, а если не отмечен - то инпут заблокирован. Пусть по умолчанию чекбокс будет не отмечен.