На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Урок 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, стили

Читайте также:




Графический интерфейс пользователя
Тестер палиндромов на C#


© upread.ru 2013-2021
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.