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

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

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

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

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