тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Работа с атрибутами в фреймворке 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 нашего элемента также мгновенно поменяется. Такое поведение мы сможем использовать для всякого рода полезных вещей.

Дан абзац. Дано свойство 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 - она отблокируется.

Дан инпут. Сделайте кнопку, нажатие на которую будет по очереди заблокировать и отблокировать наш инпут.

Модифицируйте предыдущую задачу так, чтобы состояние инпута регулировалось чекбоксом: если чекбокс отмечен, то инпут отблокирован, а если не отмечен - то инпут заблокирован. Пусть по умолчанию чекбокс будет не отмечен.