Добавить класс CSS к элементу
У меня есть модель, т.е. вот такая:
[{
"Name" : "Foo",
"CssClass" : "class1"
},
{
"Name" : "Bar",
"CssClass" : "class2"
}]
Что представлено с использованием следующего шаблона:
<li v-for = "foobar in model">
<span class = "otherclass anotherclass">{{foobar.Name}}</span>
</li>
Как я могу добавить свойство CssClass к диапазону?
Я знаю, что вы можете использовать :class = "{ active: isActive }" (согласно документация), но здесь используется предопределенный класс с именем active, тогда как я хочу добавить имя класса из модели.
Я пробовал использовать <span class = "otherclass anotherclass" :class = "foobar.CssClass">, но это вообще не добавляло CssClass к class.
Как я могу сделать так, чтобы <span> эффективно отображался как <span class = "otherclass anotherclass class1"> (для первой записи модели)? И как я могу использовать значение по умолчанию, если CssClass не определен?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете добавить класс так
<li v-for = "foobar in model">
<span :class = "foobar.CssClass" class = "otherclass anotherclass">{{foobar.Name}}</span>
</li>
Раньше я сталкивался с той же проблемой. Во время рендеринга все три класса объединятся в один class = "my_class_from_foobar otherclass anotherclass"
Кажется, моя ошибка не передавалась .CssClass от одной модели к другой. Я попытался воссоздать его в jsfiddle, но, что бы я ни делал, он всегда работал ... что привело меня к моим собственным моделям. Спасибо за вклад :)
Вы можете передать объект или массив в :class. Вы также можете использовать class и :class вместе, и Vue разрешит их правильно без проблем:
<li v-for = "foobar in model">
<span class = "otherclass anotherclass" :class = "[foobar.CssClass]">{{foobar.Name}}</span>
</li>
Я уже пробовал с :class = "foobar.CssClass", но это не дало никакого результата. Я также пробовал использовать синтаксис вашей скобки :class = "[foobar.CssClass]", но это тоже не дало результатов
<li v-for = "foobar in model">
<span :class = "'otherclass anotherclass ' + foobar.CssClass">{{foobar.Name}</span>
</li>
<li v-for = "foobar in model">
<span :class = "foobar.CssClass" class = "otherclass anotherclass">{{foobar.Name}</span>
</li>
Оба должны работать
Я уже пробовал с
:class = "foobar.CssClass", но это не дало никакого результата. (Вероятно, я должен был указать это в вопросе, поэтому сделаю это после этого комментария)