Vue 3 — привязка нескольких классов к одному условию
Из документов видно, что мы можем привязывать классы к таким условиям:
<div
class = "static"
:class = "{ active: isActive, 'text-danger': hasError }"
></div>
Что, если я захочу связать два класса с одним и тем же условием, будет ли это работать? Может быть, есть более короткий путь?
<div
class = "static"
:class = "{ active: isActive, active: isSelectable }"
></div>
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
3
1
2 783
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Если я правильно вас понимаю, вы хотите привязать несколько классов к одному и тому же условию. Ничто не мешает вам сделать это так, если вы хотите..
<div
class = "static"
:class = "{ 'class-1 class-2': condition }"
></div>
Что, если я хочу соединить имя класса с именем переменной? Нравится это :class = "{ fa-${item.icon}: 2 == 2 }"
—
20.03.2021 19:09
@MohammadAyoubKhan, тогда вы можете использовать синтаксис динамического свойства следующим образом: :class = "{ [`fa-${item.icon}`] : 2 == 2 }" Тернарии также хороши здесь внутри объявления [ ].
—
04.10.2022 19:42
Вы можете использовать || и && для объединения условий:
<div
class = "static"
:class = "{ active: isActive || isSelectable }"
></div>
Другие вопросы по теме
Применить класс условно к определенному элементу в списке Vue.js 3.0
Как получить доступ к фактической цели события, когда дочерний элемент запускает событие?
Дополнительные типы для использования с плагинами для Vue 3
Как добавить фрагмент кода VS внутри шаблона
Кодовые блоки примеров документации Vue3 странные
Файл объявления Vue3 Typescript
Как получить параметры маршрутизатора в vue 3?
Использование API useStore с vuex 4.x
Пустая страница при обслуживании моего приложения (Vue Router 4 - Vue 3)
Аксиомы VueJS 3 не могут получить данные
Похожие вопросы
Применить класс условно к определенному элементу в списке Vue.js 3.0
Попытка открыть боковое меню vue в nuxt. Какой следующий шаг?
Vuex: как я могу передать переменную геттеру?
Не удается получить доступ к методу компонента Ionic из ссылки (Vue3)
Error Элементы в итерации должны иметь директивы v-bind:key vue/require-v-for-key
Vue конвертирует изображение в base64
Как прослушивать событие вставки в форме в Safari с помощью Vuejs
Перекрывающийся список с остальной частью страницы
Можно ли опубликовать приложение Nuxt как пакет в NPM для повторного использования в другом приложении Nuxt? Если да, то как бы я это сделал?
CSS/Tailwind с использованием flex или grid для отображения повторяющихся данных в 3 строки
:class = "{ active: isActive || isSelectable }"вы также можете выделить его во вспомогательный метод, если сложность становится слишком большой.