Статьи

Как условно применить класс CSS в Vue.js

Ноябрь 26, 2018

Хотите узнать Vue.js с нуля? Получите полную коллекцию книг Vue, охватывающих основы, проекты, советы и инструменты и многое другое с SitePoint Premium. Присоединяйтесь сейчас всего за $ 14,99 / месяц .

Есть моменты, когда вам нужно изменить классы CSS элемента во время выполнения. Но при смене классов иногда лучше применять детали стиля условно. Например, представьте, что в вашем представлении есть пейджер. Пейджеры часто используются для навигации по большим наборам предметов. При навигации может быть полезно показать пользователю страницу, на которой он находится в данный момент. Стиль элемента устанавливается условно, исходя из текущей просматриваемой страницы.

Пейджер в этом случае может выглядеть примерно так:

Пейджер

В этом примере есть пять страниц. Только одна из этих страниц выбрана за раз. Если вы создали этот пейджер с Bootstrap, на выбранной странице будет применен класс CSS с именем active Вы хотите, чтобы этот класс применялся, только если страница была просматриваемой в данный момент страницей. Другими словами, вы хотите условно применить active К счастью, Vue предоставляет способ условного применения класса CSS к элементу, который я собираюсь продемонстрировать в этой статье.

Чтобы условно применить класс CSS во время выполнения, вы можете привязать его к объекту JavaScript. Чтобы успешно выполнить эту задачу, вы должны выполнить два шага. Во-первых, вы должны убедиться, что ваш класс CSS определен. Затем вы создаете привязки классов в своем шаблоне. Я собираюсь объяснить каждый из этих шагов подробно в остальной части этой статьи.

Шаг 1: Определите ваши CSS классы

Представьте на мгновение, что пять элементов страницы, показанных на рисунке выше, были определены с использованием следующего HTML: 

 <div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item active"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">4</a></li>
      <li class="page-item"><a class="page-link" href="#">5</a></li>
    </ul>
  </nav>
</div>

Обратите внимание, что каждая страница в этом фрагменте кода имеет элемент list-item ( <li … Этот элемент ссылается на класс CSS элемента page-item В коде этой статьи этот класс определен в среде Bootstrap CSS. Однако, если бы он не был определен там, вы должны убедиться, что он где-то определен. Второй класс CSS — это тот, который наиболее актуален для этой статьи.

active Для этой статьи этот класс CSS также определен в Bootstrap CSS. Как показано во фрагменте выше, activeтретьем элементе списка. Как вы можете догадаться, это класс CSS, который вы хотите применить условно. Для этого вам нужно добавить объект JavaScript.

Шаг 2. Создайте привязки классов

Давайте создадим фрагмент кода, показанный на шаге 1. При создании привязок классов в вашем шаблоне существует два основных варианта: использование синтаксиса объекта или использование синтаксиса массива. Я собираюсь показать вам, как использовать оба подхода в оставшейся части этой статьи.

Связывание с использованием синтаксиса объекта

Чтобы создать привязку класса с использованием синтаксиса объекта, вы должны использовать выражение JavaScript. Выражение, которое мы будем использовать, можно увидеть в коде, связанном с этой статьей здесь . Этот соответствующий код выглядит так: 

 <div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" v-bind:class="{'page-item':true, 'active':(page === currentPage)}">
        <a class="page-link" href="#">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

Я сократил объем кода с помощью директивы vue v-for Эта директива используется для визуализации элементов в цикле. Элементы в этом примере — сами страницы. Помимо использования директивы v-forv-bind

Директива v-bindclass Этот экземпляр Vue определяется следующим образом: 

 var app = new Vue({
  el: '#myApp',
  data: {
    totalPages: 5,
    currentPage: 3
  }
});

Этот экземпляр Vue прямо в точку. Приведенный выше объект datacurrentPage Если вы вернетесь к шаблону HTML, определенному выше, вы заметите, что на это свойство ссылаются. Фактически, объект JavaScript, связанный с каждой привязкой класса, выглядит примерно так: 

 {'page-item':true, 'active':(page === currentPage)}

Этот объект определяет два свойства: page-itemactive В частности, это имена двух классов CSS, которые обсуждались на шаге 1. На шаге 2 эти две ссылки на классы стали именами свойств в объекте JavaScript. Значения, связанные с этими именами свойств, являются выражениями JavaScript. Если выражение оценивается как правдивое, класс CSS будет включен. Если выражение оценивается как falseне будет включен. Имея в виду эти правила, давайте рассмотрим каждое свойство.

Первое свойство page-itemtrue Это жестко запрограммированное значение используется, потому что мы всегда хотим включить класс page-item Второе свойство, active Когда это выражение trueactive Это дает нам возможность условно применять activecurrentPage Другой способ условно применить activeArray

Связывание с использованием синтаксиса массива

Vue позволяет применять список классов CSS путем привязки к Array Если вы хотите использовать синтаксис Array 

 <div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
        <li v-for="page in totalPages" v-bind:class="[pageItemClass, (page === currentPage) ? activeClass : '']">
          <a class="page-link" href="#">{{ page }}</a>
        </li>
    </ul>
  </nav>
</div>

Работающую версию с синтаксисом Arrayздесь . Единственное отличие — использование Array Этот альтернативный подход предполагает наличие двух дополнительных свойств в объекте data Эти два свойства: pageItemClassactiveClass Обновленный код инициализации Vue с этими свойствами выглядит следующим образом: 

 var app = new Vue({
  el: '#myApp',
  data: {
    totalPages: 5,
    currentPage: 3,
    pageItemClass: 'page-item',
    activeClass: 'active'
  }
});

Как вы можете видеть, объект dataArray Синтаксис объекта немного более компактен. Выбор между синтаксисом объекта и синтаксисом Array

Может показаться, что оба подхода усложняют ваш HTML-шаблон. Тем не менее, здесь на самом деле происходит больше. В действительности мы разделяем проблемы. Мы создаем шаблон, основанный на данных. Это облегчает тестирование представления и его поддержку по мере роста приложения.

Заворачивать

Я надеюсь, что вы нашли эту статью ценным. Если вы хотите узнать больше о Vue.js, почему бы не проверить некоторые другие наши материалы Vue здесь, на SitePoint. В противном случае, вы можете найти меня в Twitter @chadcampbell . Еще раз спасибо!

66
Share: