Vue.js 从websocket更新数据时闪烁或闪烁文本

将vuejs与单文件组件和vuex一起使用。数据通过websocket连接流入，我使用Vuex管理状态并绑定数据以显示在各种组件中。这一切都很好

我只是在组件文件中使用mapState，然后在html中显示该值

对于某些数据，我希望在值更改时应用一些转换。即 -闪烁/闪烁该值 -闪烁/闪烁背景色

我正在显示数值，我想当数字向上变化时，短时间闪烁绿色，当数字向下变化时闪烁红色可能会很好看。仍然在争论我是想闪现实际的文本，还是包含文本的div。也在辩论我是否想在短暂的彩色闪光后将颜色恢复为黑色

---

有没有一种在vuejs中轻松实现这一点的方法？我了解如何使用计算值，但如何在vuex更新值时触发一些颜色更改动画。

您有多个选项，具体取决于您最终决定的效果

这是最简单的解决方案。使用

computed

getter上的

watch

er和条件类来设置值的样式

data: {
  myValue: {
    prev: 150,
    latest: 100
  }
},
computed: {
  valueInStore() {
    return this.$store.getters.value
  }
},
watch: {
  valueInStore(newValue, oldValue) {
    this.myValue.prev = oldValue
    this.myValue.latest = newValue
  }
}

要显示正确的css类，请执行以下操作：

<div :class="getColorClass(myValye)">{{ myValue.latest }}</div>

...

methods: {
  // method instead of computed since you were talking about multiple values
  getColorClass(foo) {
    return this.myValue.prev < this.myValue.latest ? 'green' : 'red'
  },
}

{{myValue.latest}
...
方法：{
//方法而不是计算，因为您讨论的是多个值
getColorClass（foo）{
返回this.myValue.prev

根据您的需要，您可能需要针对

prev==latest

案例进行调整

---

现在，您可以在

.green

和

.red

类中使用所需的任何css样式或动画

设置一些颜色属性，这些属性在值更新时会更改，并将它们用作内联css。我认为这可以用于设置对象的静态颜色（我在其他地方使用此方法）。如何“闪烁”或设置颜色动画？