javascript - 使用来自 JavaScript 的数据源设置类

Question

我想在 vue.js 中构建一个从 JavaScript 接收的数据源列表

<div class="{{item.clockIn}}"></div>

其中 {{item.clockIn}} 返回两种类型的值，即 true 和 false。

.true {
content: 'IN';
color: blue;
}
.true {
content: 'OUT';
color: red;
}

但是它并没有像我想的那样工作。任何人都可以帮助我。

Answer 1

首先，您的类定义中似乎有错字。第二个 .true 类应该是 .false。然后你可以使用这样的东西:

<div :class="item.clockIn ? 'true' : 'false'"></div>

这使得 class 属性具有反应性，并直接获取与 item.clockIn 相关的值。