Содержание цикла

1. Article 1
2. Article 2

Поскольку и class, и style это атрибуты, то для привязки можно использовать директиву v-bind или ее сокращенный вариант. Однако привязка сгенерированных значений, например, используя конкатенацию, вызовет ошибку и работать не будет. Для этого придумано специальный функционал для привязки class и style.

Привязка HTML классов

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

<script setup>
import { ref } from 'vue'
const isActive = ref(true)
</script>

<template>
  <div :class="{active: isActive}">Test</div>
</template>

Это значит, что будет класс active, если значение isActive будет истиной.

Можно использовать несколько переключателей классов в одной директиве. Динамические  классы возможно использовать со статическими, обычными классами.

<div class="simple-class" :class="{active: isActive}">Test</div>

То в итоге получим

<div class="simple-class active">Test</div>

Есть возможность привязать объект.

<script setup>
import { ref, reactive } from 'vue'

const cls = reactive({
  active: true,
  warning: false  
})
</script>

<template>
  <div class="simpleClass" :class="cls">Test</div>
</template>

На выходе получим

<div class="simpleClass active">Test</div>

Можно привязать вычисляемое свойство, которое возвращает объект.

<script setup>
import {ref, computed} from 'vue'

const active = ref('active')
const isShow = ref(true)

const cls = computed(() => ({
  active: active.value === 'active',
  show: isShow.value,
  hide: !isShow.value
}))
</script>

<template>
  <div :class="cls">Test</div>
</template>

<style scoped>
  .active {
    color: red;
  }
  .show {
    display: block;
  }
  .hide {
    display: none;
  }
</style>

Привязка массивов

В директиву можно передать массив, чтобы использовать сразу список классов.

<script setup>
import { ref } from 'vue'
const active = ref('active-123')
const error = ref('error-class')
</script>

<template>
  <div :class="[active, error]">Test</div>  
</template>

На выходе получим

<div class="active-123 error-class">Test</div>

В массиве можно использовать тернарный оператор для подключения класса

<script setup>
import { ref } from 'vue'
const active = ref('active-123')
const error = ref('error-class')
const isError = false
</script>

<template>
  <div :class="[isError ? active : '', error]">Test</div>  
</template>

На выходе получим

<div class="error-class">Test</div>

Такой же результат получим, если будем использовать

<template>
  <div :class="[{active: isError}, error]">Test</div>
</template>

Использование классов в компонентах

Если у дочернего компонента один корневой элемент, то мы можем передавать классы, не указывая их в дочернем компоненте

App.vue:

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const child = ref('child-class')
</script>

<template>
  <ChildComponent :class="child" />
</template>

ChildComponent.vue:

<template>
  <div class="default-class">Test</div>
</template>

На выходе получим:

<div class="default-class child-class">Test</div>

Но если у компонента внутри несколько элементов, то мы должны определить какой из этих элементов получит класс. Мы можем это сделать при помощи свойства $attr.

App.vue будет прежним, именим ChildComponent.vue:

<template>
  <div class="default-class">Test</div>
  <div :class="$attrs.class" class="second-class">Second element</div>
</template>

На выходе получим:

<div class="default-class">Test</div>
<div class="child-class second-class">Second element</div>

Привязка инлайн стилей

Директива :style поддерживает привязку  значений js объектов. Это соответствует использованию html элемента style. Хоть для ключей и рекомендован camelCase, :style также поддерживает kebab-case стиль именования ключей.

<script setup>
import { ref } from 'vue'
const dangerColor = ref('red')
</script>

<template>
  <div :style="{color: dangerColor}">Test</div>
</template>

Мы можем привязать к :style объект, который применится к элементу.

<script setup>
import { reactive } from 'vue';
const styles = reactive({
  color: 'red',
  backgroundColor: 'black'
})
</script>

<template>
  <div :style="styles">Test</div>
</template>

Можно передать несколько объектов в массиве:

<script setup>
import { reactive } from 'vue';
const defaultStyle = reactive({
  border: '1px',
  borderStyle: 'solid'
})
const dangerStyle = reactive({
  borderColor: 'red'
})
</script>

<template>
  <div :style="[defaultStyle, dangerStyle]">Test</div>
</template>

Есть возможность передавать несколько значений для одного свойства.

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

Будет использовано только то свойство, которое поддерживается браузером