Привязки класса и стиля

Чаще всего нам требуется привязка данных при манипулировании списком классов элемента и его встроенными стилями. Поскольку оба они являются атрибутами, мы можем использовать директиву v-bind для их обработки: здесь наши выражения вычисляют только конечные строки.

Однако вмешательство в конкатенацию строк подвержено ошибкам и раздражает. Таким образом, Vue обеспечивает специальные улучшения, когда v-bind используется с классом и стилем. Выражения также оценивают объекты и массивы, а не только строки.

Связывание классов HTML

Синтаксис объекта

Мы можем динамически переключать классы, передавая объект в v-bind: class:

<div v-bind:class="{active: isActive}"></div>

Наличие активного класса определяется истинностью свойства данных isActive.

Несколько классов могут быть переключены, если в объекте будет больше полей, v-bind: class может сосуществовать с атрибутом простого класса:

<div class="static"
  v-bind:class="{active: isActive, 'text-danger': hasError}">
</div>

Со следующими данными:

data: {
  isActive: true,
  hasError: false
}
This will render:
<div class="static active"></div>

Список классов обновляется после изменения свойств данных. Например, когда hasError имеет значение false, список классов изменяется на статическую активную текстовую опасность.

Связанный объект не должен быть встроенным:

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,'text-danger': false
  }
}

Кроме того, мы можем связать вычисляемое свойство, которое возвращает объект:

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type ==='fatal'
    }
  }
}

Синтаксис массива

Чтобы применить список классов, мы можем передать массив в v-bind: class

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

Это делает:

<div class="active text-danger"></div>

Тернарное выражение может быть использовано для условного переключения класса:

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

Приведенный выше код будет применять activeClass, если isActive является правдивым, но всегда применяется errorClass.

Приведенный выше код может быть упрощен с использованием синтаксиса объекта:

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

С компонентами

Я предполагаю, что вы знакомы с компонентами Vue для этого раздела.

Когда мы используем атрибут класса в пользовательском компоненте, классы будут добавлены к элементу роли компонента. Это не перезапишет классы в элементе.

Возьмем, к примеру, когда мы объявляем этот компонент:

Vue.component('my-component', {
  template: '>p class="foo bar">Hi</p>'
})

И мы также добавляем некоторые классы при использовании компонента:

<my-component class="baz boo"></my-component>

Это приводит к HTML ниже:

<p class="foo bar baz boo"<Hi</p>

Это также относится и к привязке классов:

<my-component v-bind:class="{ active: isActive }"></my-component>

HTML, который будет отображен, когда isActive is true, будет:

<p class="foo bar active">Hi</p>

Связывание встроенных стилей

Синтаксис объекта

v-bind имеет довольно простой синтаксис объекта - он почти как CSS, но это объект JavaScript. Для имени свойства CSS мы можем использовать либо kebab-case, либо camelCase:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
  activeColor: 'red',
  fontSize: 30
}

Чаще всего для создания более чистого шаблона рекомендуется связать его непосредственно с объектом стиля:

<div v-bind:style="styleObject"></div>
data:{
  styleObject: {
    color:'red',
    fontSize:'13px'
  }
}

Синтаксис массива

Синтаксис массива для v-bind: style позволит нам применить несколько объектов стиля к элементу:

<div v-bind:style="[baseStyles, overridingStyles]"></div>

Авто-префиксы

Vue автоматически обнаруживает и добавляет соответствующие префиксы в свойства CSS, для которых требуются префиксы вендора в стиле v-bind :.

Несколько значений

&div v-bind:style="{display: ['-webkit-box', '-ms-flexbox', 'flex'] }">>/div>

Приведенный выше фрагмент будет отображать только последнее значение в массиве, которое поддерживает браузер.