Question

我正在使用v-for"x in y"生成表行。我还想根据循环中的值之一设置一些条件类。

示例：

<tr v-for="file in fileList" class="bg-green if file.include">
  <td><% file.filename %></td>
  <td><% file.extension %></td>
  <td><% file.mime %></td>
</tr>

如果file.include是true，我希望应用类bg-green，但它会引发错误。

注意：就像在使用Flask一样使用自定义分隔符。

Answer 1

就是这样：

<tr v-for="file in fileList" :class="{'bg-green': file.include}">

:class是v-bind:class的简写形式。要使该值成为表达式，必须进行绑定。

有几种写表达式的方法，但是在这种情况下，最简单的方法是使用对象形式。属性的键是类名，值是确定是否包含该类名的true / falsey值。

替代方案包括：

<tr v-for="file in fileList" :class="file.include ? 'bg-green' : ''">

有关更多信息，请参见https://vuejs.org/v2/guide/class-and-style.html。

使用v-for上的循环值设置条件类

1 个答案: