向元素添加CSS类

Question

我有一个模型，就像这样：

[{
    "Name" : "Foo",
    "CssClass" : "class1"
},
{
    "Name" : "Bar",
    "CssClass" : "class2"
}]

这使用以下模板呈现：

<li v-for="foobar in model">
    <span class="otherclass anotherclass">{{foobar.Name}}</span>
</li>

我该如何将CssClass属性附加到span元素上？

我知道你可以使用:class="{ active: isActive }"（根据文档），但这使用了一个预定义的类名叫做active，而我想要将类名从模型中附加。

我尝试使用，但这根本没有将CssClass添加到class中。

我该如何使其生效，以便第一个模型条目的将有效地呈现为？如果未定义CssClass，我还可以如何使用默认值？

- GTHvidsten

Answer 1

你可以这样添加类：

您可以这样附加类

<li v-for="foobar in model">
    <span :class="foobar.CssClass" class="otherclass anotherclass">{{foobar.Name}}</span>
</li>

我曾经遇到过相同的问题。在渲染时，这三个类将合并成一个 class="my_class_from_foobar otherclass anotherclass"

- Trevor V

---

我已经尝试过使用:class="foobar.CssClass"，但是完全没有任何结果。（我可能应该在问题中指明这一点，所以我会在这条评论之后这样做） - GTHvidsten

似乎我的错误是未能将“ .CssClass”从一个模型传递到另一个模型。我尝试在jsfiddle中重新创建它，但无论我做什么，它总是有效的...这导致我检查了自己的模型。感谢您的帮助 :) - GTHvidsten

Answer 2

您可以将对象或数组传递给:class。您也可以同时使用class和:class，Vue会正确解析两者，没有问题：

<li v-for="foobar in model">
    <span class="otherclass anotherclass" :class="[foobar.CssClass]">{{foobar.Name}}</span>
</li>

- pretzelhammer

---

我已经尝试过使用 :class="foobar.CssClass"，但是完全没有任何结果。我还尝试了你的括号语法 :class="[foobar.CssClass]"，但也没有任何结果。 - GTHvidsten

Answer 3

<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>

两者都应该可以工作

- burak ataseven