Question

我们正在使用vue.js从实时流中呈现日志，如下所示：

                    <tr v-else v-for="log in logs" v-cloak>
                        <td>{{log.id}}</td>
                        <td>...</td>
                    </tr>

我们使用EventSource中的元素来移除数组，如下所示：

    this.eventSource.onmessage = function(log) {
        if (log.data) {
            vue.logs.unshift(JSON.parse(log.data));
        }
    };

这一切都很好并且有效。我想做的是用一定的颜色突出显示新插入的元素10秒，以便用户可以看到有新的东西。

Answer 1

这是使用List Transition effect的好地方。以下是如何将突出显示效果应用于表格中的新行的示例：

<强>模板

<table>
  <tbody is="transition-group" name="list">
    <tr v-for="log in logs" :key="log.id">
      <td>{{ log.id }}</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

<强> CSS

.list-enter-active {
  transition: all 5s;
}
.list-enter {
  background: yellow;
}

这将为新添加的日志条目提供5秒黄色背景突出显示。

vue.js：突出显示新插入的行

1 个答案: