Коллеги, для использования кастомного комплекта классов у компонента использую подобную

Question

Коллеги, для использования кастомного комплекта классов у компонента использую подобную

запись.
Но видел (если мне не пригрезилось) запись вида
:class="{
class-name: <условие включения класса>
}"

какие есть варианты кастомизации комплекта классов в компоненте?
Запись, как делаю я мне не очень нравится из-за необходимости указывать либо либо вариант.
Запись. которая мне пригрезилась нравится больше, но я не понимаю,Как это может работать....

#frontend #javascript #programming #russian #vue.js

0

21.03.2022

13 ответов

22 просмотра

Roman

что такое пригрезилась?

0

21.03.2022

Максим Юдин Автор вопроса

Grigorii K. Shartsev
А что не понятно с объектом с классами?

ну как я понимаю, запись объекта, где поля эквиваленты названиям класса, а значения этих полей либо true либо false Но как они включаются?

0

21.03.2022

Grigorii K. Shartsev

Максим Юдин
ну как я понимаю, запись объекта, где поля эквивал...

Что значит "включаются"?

0

21.03.2022

Artur Karapetov

Максим Юдин
ну как я понимаю, запись объекта, где поля эквивал...

for k in Object.keys(classes) { if classes[k] { // addClass logic } }

0

21.03.2022

Roman

Artur Karapetov
for k in Object.keys(classes) { if classes[k] { ...

has не вариант?

0

21.03.2022

Максим Юдин Автор вопроса

Grigorii K. Shartsev
Что значит "включаются"?

ну как из записи :class="{ class-name: true }" по итогу поучается class="class-name"

0

21.03.2022

Artur Karapetov

Roman
has не вариант?

я ж как пример, без претензий ) has это про hasOwnProperty?

0

21.03.2022

Grigorii K. Shartsev

Artur Karapetov
for k in Object.keys(classes) { if classes[k] { ...

Вот так как раз совсем не Vue-way. Это замена декларативного шаблона, где сразу видно вёрстку и зависимость классов от условий на императивную сборку классов. Так норм, когда классы собираются как-то сложно, чтобы не мешаоть логику в шаблон, но для просто классов по простым условиям в Vue есть специальный удобный механизм

0

21.03.2022

Artur Karapetov

Grigorii K. Shartsev
Вот так как раз совсем не Vue-way. Это замена декл...

я имел ввиду что как-то так vue парсит атрибут class. я не смотрел исходники. просто как догадка вот, доработал let class = { "btn": true, "form-control": false, } let resultClassArr = [] for k in Object.keys(class) { // k = btn, form-control if class[k] { resultClassString.push(k) } } class=" ".join(resultClassArr)

0

21.03.2022

Grigorii K. Shartsev

Artur Karapetov
я имел ввиду что как-то так vue парсит атрибут cla...

какой-то python код)

0

21.03.2022

Artur Karapetov

Grigorii K. Shartsev
какой-то python код)

согласен. но разве плох ли он для понимания внутренного устройства работы с объектом типа class_name : bool ?

0

21.03.2022