Урок 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.
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

тегистатьи IT, Уроки по Vue, Vue, стили




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




Урок 4. Работа с формами в Yii2
Базовый регулятор громкости C#
VirtualBox и Ubuntu: советы