Атрибуты тегов в фреймворке Vue

Использовать данные из настройки data можно не только в виде html содержимого тегов. Но и в качестве атрибутов, используя директиву "v-bind". Попробуем её на практике, применим сразу к атрибуту id и class:

<div id="application">
   <div v-bind:id="element_id"></div>
   <div v-bind:class="element_class"></div>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         element_id: 'значение_id',
         element_class: 'значение_class'
      },
   });
</script>

Если запустить такой код, то в значения атрибутов вместо "element_id" будет вставлено "значение_id", а вместо "element_class" будет "значение_class". В итоге, HTML будет выглядеть так:

<div id="application">
   <div id="значение_id"></div>
   <div class="значение_class"></div>
</div>

Vue будет автоматически отслеживанать изменение значений свойств в настройке data и самостоятельно менять значения id и class у html элементов.

Директиву "v-bind" можно применять не только для изменения id и class. Попробуем применить его к атрибутам тега input. К примеру, к атрибуту "disabled", который отключает возможность изменять содержимое текстового поля. Получится такой код:

<div id="application">
   <input type="text" v-bind:disabled="text_disabled">
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         text_disabled: true
      },
   });
</script>

При загрузке страницы с таким кодом появится неактивное текстовое окно. Потому что Vue подставит значение "true" из свойства "text_disabled" в атрибут "disabled". Если изменить это значение на "false", то текстовое поле снова станет активным, в неё можно будет изменить содержание.