将 CSS class 附加到元素

Question

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

[{
    "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 }"（根据 documentation），但这使用了一个名为 active 的预定义 class，而我想附加 class 模型名称。

我尝试使用 <span class="otherclass anotherclass" :class="foobar.CssClass">，但根本没有将 CssClass 添加到 class。

我如何着手进行这项工作，以便 <span> 有效地呈现为 <span class="otherclass anotherclass class1">（对于第一个模型条目）？在未定义 CssClass 的情况下，我如何使用默认值？

Answer 1

您可以像这样附加 class

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

我运行过去也遇到过同样的问题。在渲染过程中，所有三个 classes 将合并为一个 class="my_class_from_foobar otherclass anotherclass"

Answer 2

您可以将对象或数组传递给 :class。你也可以同时使用 class 和 :class，Vue 会正确解决这两个问题：

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

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>

两者都应该有效

将 CSS class 附加到元素

Append CSS class to element

html

javascript

css

vue.js