Привязка атрибута

5 мин

Вы уже изучили отображение данных на странице с помощью руля ({{}}). Но текст на странице не является единственной частью, которую может быть необходимо сделать динамической.

Многие значения на странице задаются с помощью атрибутов. К счастью, Vue.js позволяет выполнять привязку к атрибутам с помощью директив.

Директивы

Директивы — это атрибуты, которые распознает Vue.js. Они позволяют динамически задавать значения атрибутов HTML. Все директивы начинаются с v-.

v-bind

Основная директива — v-bind. Она позволяет привязать значение данных к атрибуту. Ее можно использовать для динамического задания имени класса, источника изображения или стиля.

Чтобы использовать директиву, поместите v-bind и двоеточие (:) перед атрибутом, который необходимо задать. Чтобы задать src атрибут для изображения, используйте v-bind:src="value". Затем значение атрибута вычисляется точно так же, как оно вычисляется при использовании синтаксиса {{ }}.

Следующий код создает элемент HTML <img src="./media/sample.jpg">.

<div id="app">
    <img v-bind:src="imageSource" />
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                imageSource: './media/sample.jpg'
            }
        }
    }).mount('#app');
</script>

Свойство imageSource доступно для шаблона, так как оно возвращается из метода data(). Тогда оно привязано к атрибуту src элемента изображения.

Примечание.

Поддерживать ссылку на объект, используемый для приложения, не нужно. Но можно вызвать createApp немедленно, а затем mount, как было показано ранее.

Сокращенная форма привязки

Теперь вы узнали, как использовать директиву v-bind в приложении Vue для привязки данных к атрибуту. Эту директиву также можно ввести в сокращенном виде. Например, вместо ввода v-bind:attribute можно ввести :attribute. Эта сокращенная форма экономит несколько символов.

В примере источника привязанного изображения можно использовать краткую форму следующим образом.

<div id="app">
    <img v-bind:src="imageSource" />
</div>

Теперь можно ввести следующий код.

<div id="app">
    <img :src="imageSource" />
</div>

Совет

Использование сокращенной формы :attribute обычно считается лучшим методом, чем использование v-bind:attribute.

Класс и стиль

Среди наиболее распространенных атрибутов, которые можно задать для элемента HTML, находятся его class или style. Для привязки к этим атрибутам можно использовать v-bind:class и v-bind:style. В сокращенном варианте можно использовать :class и :style.

Объекты класса

Предположим, у вас есть приложение с двумя классами: centered и active. Вот как можно использовать эти классы в HTML.

<div class='centered active'>Hello, Vue!</div>

Однако этот пример статичен. Если требуется возможность изменения данных, можно использовать привязку. Vue допускает привязку не только для строки, но и для объекта.

Вот как можно перейти от статического значения centered active для другого свойства:

<div id="app">
    <div :class="classObject">Hello, Vue!</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                classObject: {
                    centered: true,
                    active: true
                }
            }
        }
    }).mount('#app');
</script>

Свойство данных classObject имеет два свойства, значения которых являются логическими. Логические значения позволяют включать или отключать определенные классы. Задание centered для false будет отображаться как <div class="active">, так как active будет единственным свойством, все еще являющимся true.

Примечание.

Правила именования JavaScript применяются к объектам класса. Поэтому, если имя класса использует тире, например в center-text, заключите это имя в кавычки ('center-text': true) при добавлении свойства.

Объекты стиля

Установка стилей в CSS включает создание коллекций пар "ключ-значение". Представление стиля с помощью объекта JavaScript является относительно естественным. Во Vue.js можно создавать объекты стиля, чтобы задать стиль.

Например, чтобы задать цвет фона (background-color) стиля элемента HTML, можно использовать следующий код.

<div id="app">
    <div :style="styleObject">Hello, Vue!</div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                styleObject: {
                    'background-color': 'red'
                }
            }
        }
    }).mount('#app');
</script>