Создание визуально привлекательных приложений не менее важно, чем их функциональность. Согласитесь, что аккуратный и современный интерфейс помогает пользователю быстрее разобраться в продукте и получить удовольствие от работы с ним. В этой статье мы разберём, как управлять классами и стилями в Vue 3, используя Composition API. Покажу вам, как можно динамически изменять внешний вид элементов в зависимости от состояния приложения.

Навигация по статье

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

Vue.js предлагает простой и удобный способ динамически изменять классы элементов через директиву :class. Эта директива связывает данные из ваших реактивных переменных с атрибутами DOM, делая интерфейс интерактивным и адаптивным.

Пример привязки класса

Допустим, у нас есть задача: если пользователь нажал на кнопку, мы должны изменить её внешний вид. Это легко можно сделать с привязкой классов.

<template>
  <button :class="buttonClass" @click="toggleButton">Click me</button>
</template>

<script setup>
import { ref } from 'vue';

const isActive = ref(false);

const toggleButton = () => {
  isActive.value = !isActive.value;
};

const buttonClass = computed(() => ({
  'btn-active': isActive.value,
  'btn-inactive': !isActive.value
}));
</script>

<style>
.btn-active {
  background-color: green;
  color: white;
}
.btn-inactive {
  background-color: red;
  color: white;
}
</style>

В этом примере кнопка меняет цвет при каждом нажатии. Мы используем вычисляемое свойство buttonClass, которое возвращает объект с классами в зависимости от значения переменной isActive. Vue автоматически применяет нужные классы, и мы без лишних усилий добились динамической смены стилей.

Массивы классов

Классы можно передавать не только в виде объекта, но и массива. Это особенно удобно, если классы статичны или зависят от нескольких условий.

<template>
  <div :class="[baseClass, isActiveClass]">Hello, World!</div>
</template>

<script setup>
import { ref } from 'vue';

const baseClass = 'text-center';
const isActive = ref(true);

const isActiveClass = computed(() => (isActive.value ? 'text-bold' : 'text-light'));
</script>

<style>
.text-center {
  text-align: center;
}
.text-bold {
  font-weight: bold;
}
.text-light {
  font-weight: 300;
}
</style>

Здесь baseClass всегда остаётся неизменным, а isActiveClass динамически меняется в зависимости от состояния переменной isActive. Это хороший пример того, как можно легко комбинировать статические и динамические классы.

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

Классы — это хорошо, но что делать, если вам нужно привязать конкретный стиль, а не просто класс? Например, вы хотите изменять размер элемента в зависимости от данных. Для этого в Vue.js есть директива :style, которая принимает объект с ключами CSS-свойств.

Пример динамической привязки стилей

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

<template>
  <div :style="blockStyle"></div>
  <input type="range" v-model="width" min="100" max="500" />
</template>

<script setup>
import { ref } from 'vue';

const width = ref(100);

const blockStyle = computed(() => ({
  width: `${width.value}px`,
  height: '100px',
  backgroundColor: 'blue'
}));
</script>

Когда пользователь двигает ползунок, ширина блока изменяется в соответствии с введённым значением. Мы динамически генерируем инлайновые стили через объект blockStyle, который Vue автоматически применяет к элементу.

Условные классы и стили

Теперь давайте разберём, как работать с более сложными условиями для применения классов и стилей. Например, вы хотите изменить внешний вид элемента в зависимости от нескольких параметров.

Пример с условными классами

Допустим, у нас есть статус заказа, который может быть «выполнен», «в процессе» или «отменён». Мы хотим отображать разные цвета для каждого состояния.

<template>
  <div :class="statusClass">Order Status: {{ status }}</div>
</template>

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

const status = ref('pending'); // Значение может быть 'completed', 'pending' или 'cancelled'

const statusClass = computed(() => {
  return {
    'status-completed': status.value === 'completed',
    'status-pending': status.value === 'pending',
    'status-cancelled': status.value === 'cancelled',
  };
});
</script>

<style>
.status-completed {
  color: green;
}
.status-pending {
  color: orange;
}
.status-cancelled {
  color: red;
}
</style>

Здесь мы используем объект для динамического присвоения классов в зависимости от значения переменной status. Vue автоматически применит нужный класс к элементу, основываясь на текущем статусе заказа.

Динамическая тема с помощью классов

Представьте, что вы хотите добавить в ваше приложение возможность смены темы (светлая/тёмная) — довольно распространённый запрос в современных веб-приложениях. Мы можем легко управлять этим с помощью Vue.

Пример с переключением темы

<template>
  <div :class="themeClass">
    <p>Switch between Light and Dark theme:</p>
    <button @click="toggleTheme">Toggle Theme</button>
  </div>
</template>

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

const isDarkTheme = ref(false);

const toggleTheme = () => {
  isDarkTheme.value = !isDarkTheme.value;
};

const themeClass = computed(() => (isDarkTheme.value ? 'dark-theme' : 'light-theme'));
</script>

<style>
.light-theme {
  background-color: #fff;
  color: #000;
}

.dark-theme {
  background-color: #000;
  color: #fff;
}
</style>

Здесь мы добавляем возможность переключаться между светлой и тёмной темой, просто изменяя классы на уровне корневого элемента. Это удобный способ менять стили на всём сайте или приложении одним переключением.

Советы по работе с классами и стилями в Vue

Используйте вычисляемые свойства для сложных классов и стилей. Это не только упрощает код, но и делает его более читаемым и поддерживаемым.
Комбинируйте статические и динамические классы. Не бойтесь использовать массивы классов или объекты для более гибкой работы с оформлением.
Инлайн-стили полезны, когда вам нужно изменить что-то специфическое (например, размеры или цвета на основе данных). Но старайтесь не злоупотреблять инлайн-стилями для сложных задач — лучше использовать CSS-классы.

Заключение

Теперь у вас есть чёткое понимание, как в Vue 3 можно управлять классами и стилями, используя Composition API. Этот процесс невероятно гибкий, и с ним ваши приложения станут не только функциональными, но и красивыми. Ваша цель — сделать интерфейс интерактивным, интуитивно понятным и адаптивным, а Vue.js даёт вам все инструменты для этого.

В следующих статьях мы рассмотрим, как работать с условной отрисовкой и списками, чтобы сделать наше приложение ещё более динамичным и мощным!