Атрибуты тегов в фреймворке 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", то текстовое поле снова станет активным, в неё можно будет изменить содержание.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: