Урок 10. Инлайн стили, классы и условия в Vue.js

На этом уроке из серии уроков Vue для начинающих мы поговорим о том, как во Vue работать со стилями и классами. Точно также, как и в обычном HTML в шаблонах Vue мы можем задать стиль элемента и/или класс его прямо на самом элементе:

<div style="color:green;" class="upClass">Upread.Ru</div>

Но вью нам нужен для динамичности (в том числе), так что давайте попробуем добавить эту самую динамичность.

Директива v-if

Если вы знакомы с каким-нибудь языком программирования (а для работы с Vue надо хотя бы немного знать JS), то конструкцию if-else наверняка знаете. Во вью она v-if (v-else). То есть смотрим условие и что=- то делаем (выводим) в зависимости от условия.

<div v-if="contactsDopInfo">{{contactsDopInfo}}</div>

…..

  data() {
        return {
            contactsDopInfo: ''
    }
}

В примере выше мы показываем див, если есть что показывать в переменной contactsDopInfo.

Класс

Забайндим класс:

<div v-if="contactsDopInfo" :class="activeClassButton">contactsDopInfo}}</div>
…

  data() {
        return {
            contactsDopInfo: '',
activeClassButton: 'recording _accessible',
    }
}

А вот здесь мы элементу присваиваем класс, причем класс прописываем в соответствующем поле.

Тернарный оператор

Кроме простых v-if можно задействовать и тернарные операторы

<a href="#" :class="[isActiveButton ? activeClassButton : inActiveClassButton]" v-on:click="createRecord">Создать</a>

…
isActiveButton: false,
activeClassButton: 'item_recording_buttons_accessible',//класс кнопки сохранения записи активный
inActiveClassButton: 'item_recording_buttons_inaccessible'//класс кнопки сохранения записи неактивный

Выбираем активный класс в зависимости от значения isActiveButton.

Таким образом с помощью Vue можно создавать довольно сложные динамические конструкции вообще без использования JS.