Работа с атрибутами, директива v-bind в Vue

Вставлять значения свойств из data можно в атрибуты тегов. Это делается с помощью директивы v-bind.

Давайте с помощью этой директивы установим значение атрибута src для тега img. Пусть желаемое значение хранится в свойстве:

App.vuedata()
{
    return {
        attr: 'img.png',
    }
}

Запишем значение из свойства в атрибут src:

<template>
<img v-bind:src="attr">
</template>

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

App.vue<template>
<img :src="attr">
</template>

Стилизация

Работа с атрибутом class происходит через директиву v-bind или ее сокращенную форму. Давайте посмотрим на практике. Пусть в свойстве str хранятся CSS классы тега, разделенные пробелами:

App.vuedata()
{
    return {
        str: 'active valid',
    }
}

Добавим эти CSS классы в какой-нибудь тег:

App.vue<template>
    <p :class="str">text</p>
</template>

Объект с CSS классами

CSS классы могут также хранится в объектах. При этом имена классов будут ключами объекта, а элементами объекта будут логические значения. Если значение будет true, то класс будет добавлен элементу, а если false, то не будет.

App.vuedata()
{
    return {
        obj: {
            active: true,
            valid: false,
        },
    }
}

Привяжем этот объект к тегу:

App.vue<template>
    <p :class="obj">text</p>
</template>