Как использовать привязки стилей и классов в Vue.js

Введение

В этой статье вы узнаете о динамических стилях и привязках классов в Vue.js. С помощью директивы v-bind:style вы визуализируете размер шрифта в событии клика. С помощью v-bind:class вы увидите, как применять несколько классов к элементам.

Хотя это возможно с помощью манипулирования DOM, Vue.js позволяет динамически отображать как стили, так и классы с помощью кратких строк кода и использует преимущества своей структуры модели данных.

Динамическое связывание стилей

Давайте разработаем в Vue.js способ увеличения или уменьшения размера шрифта в зависимости от ввода пользователя. Для этого Vue предоставляет нам директиву v-bind:style.

В файле App.js создайте экземпляр Vue и включите свою модель данных:

data() {
  return {
    fontSize: 10
  }
}

Создайте две кнопки в файле index.html и абзац, который принимает директиву v-bind:style:

<button v-on:click="fontSize++">
  Increase font size
</button>
<button v-on:click="fontSize--">
  Decrease font size
</button>

<p v-bind:style="{ fontSize: fontSize + 'px' }">
  Font size is: {{ fontSize }}
</p>

При каждом щелчке директива v-bind:style увеличивает и уменьшает значение вашей переменной fontSize. Это прикрепляет значение fontSize к свойству CSS font-size.

При необходимости добавьте несколько объектов стилей в директиву v-bind:style. В файле App.js включите объекты стилей следующим образом:

data() {
  return {
      baseStyles: {
      fontWeight:'800',
      color: 'red'
    },
      overrideStyles: {
      color:'blue'
    } 
  }
}

В файле index.html укажите массив объектов стиля:

<p v-bind:style="[baseStyles, overrideStyles]">
  baseStyles and overrideStyles
</p>

Примечание. Обратите внимание на порядок объектов стиля в массиве, поскольку логика в следующих элементах переопределяет предыдущие.

Теперь, когда вы рассмотрели привязки стилей, давайте рассмотрим динамические классы в Vue.js.

Динамическое связывание классов

Непосредственное применение стилей может усложниться по мере изменения требований. Чтобы помочь в этом, директива v-bind:class предоставляет способ привязки классов к содержимому элемента.

Например, вам может понадобиться подчеркнуть текст элемента и изменить цвет и толщину шрифта.

Хотя это можно реализовать с помощью привязки стиля, Vue.js позволяет добавить дополнительную производительность с помощью директивы v-bind:class.

Для этого создайте массив menuItems и переменную selected со значением по умолчанию Home в вашем App.js файл:

data() {
  return {
    selected: 'Home',
    menuItems: ['Home', 'About', 'Contact']
  }
}

В файле index.html примените цикл v-for в упорядоченном списке для перебора элементов в массиве menuItems.

При каждом щелчке директива v-bind:class присваивает значение переменной selected текущему элементу в menuItems. Это позволяет вам передать несколько классов в элемент упорядоченного списка и добавить любой стиль, указанный в CSS:

<ul>
  <li v-for="item in menuItems"
    v-on:click="selected = item"
    v-bind:class="{ selected: selected == item}">
      {{item}}
  </li>
</ul>

Вы также можете передать несколько классов в массиве с помощью директивы v-bind:class.

Определите массив классов в вашей модели данных в файле App.js:

data() {
  return {
    classArray: ['selected', 'underlined']
  }
}

В файле index.html обратитесь к вашему classArray с помощью директивы v-bind:class.

<p v-bind:class="[classArray]">
  Multiple classes {{ classArray }}
</p>

Это применит к элементу как классы selected, так и классы underlined.

Заключение

Использование директив стиля и класса Vue.js поддерживает динамические действия внутри ваших элементов и поддерживает несколько экземпляров для более высокой производительности.