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的预定义类，而我想从模型中追加类名称。 / p>

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

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

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"

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类附加到元素

3 个答案: