vue2 websocket 每次推送新的数据改变样式 旧数据返回样式

可以通过在 Vue 组件中使用 computed 属性和 v-bind:class 指令来实现此功能。

首先，定义一个 computed 属性，用于判断每个数据是否为最新的推送数据：

computed: {
  isLatestData() {
    return this.data === this.latestData
  }
}

然后，在模板中使用 v-bind:class 指令来绑定样式类，并根据 computed 属性的值来判断是否添加样式类：

<div v-for="data in dataList" :key="data.id" :class="{ 'new-data': isLatestData(data) }">
  {{ data.content }}
</div>

最后，在样式表中定义 .new-data 类的样式，用于表示最新推送的数据：

.new-data {
  font-weight: bold;
}

相关问题

vue2 websocket 每次推送新的数据改变样式同时旧的数据返回样式

你可以在接收到新的数据时，将该数据的样式改变为新的样式，并将之前的数据的样式改回旧的样式。可以使用一个数组来保存所有的数据，每个数据对象包含数据本身和对应的样式，每次更新数据时，遍历数组，将旧的数据样式改回旧的样式，将新的数据样式改为新的样式即可。具体代码如下：

<template>
  <div>
    <div v-for="(item, index) in dataList" :key="index" :class="{'new-data': item.isNew, 'old-data': !item.isNew}">
      {{ item.data }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: []
    }
  },
  mounted() {
    // 建立 WebSocket 连接
    const ws = new WebSocket('ws://localhost:3000')
    ws.onmessage = (event) => {
      const data = event.data
      this.dataList.push({ data, isNew: true })
      this.updateDataStyle()
    }
  },
  methods: {
    updateDataStyle() {
      // 更新样式
      for (let i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i].isNew) {
          this.dataList[i].isNew = false
        } else {
          this.dataList[i].isNew = true
        }
      }
    }
  }
}
</script>

<style>
.new-data {
  color: red;
}
.old-data {
  color: black;
}
</style>

以上代码中，使用了 `isNew` 标记来表示数据是否是新的，初始值为 `true`。在接收到新数据时，将新数据加入 `dataList` 数组，并调用 `updateDataStyle` 方法更新样式。在 `updateDataStyle` 方法中，遍历 `dataList` 数组，将旧的数据的 `isNew` 标记改为 `true`，将新数据的 `isNew` 标记改为 `false`，这样就可以实现旧数据返回旧样式，新数据改变新样式的效果。

vue websocket 每次推送新的数据改变样式 旧数据返回样式

你可以在 Vue 组件中使用 WebSocket 进行实时数据推送，并且使用数据绑定和计算属性来根据推送的新旧数据改变样式。

首先，在 Vue 组件中创建 WebSocket 对象：

// 创建 WebSocket 对象
let socket = new WebSocket('ws://localhost:3000');

// 监听 WebSocket 连接状态
socket.onopen = function(event) {
  console.log('WebSocket 连接已建立');
};

socket.onclose = function(event) {
  console.log('WebSocket 连接已关闭');
};

socket.onerror = function(event) {
  console.log('WebSocket 连接发生错误');
};

然后，在 Vue 组件中使用计算属性来根据推送的新旧数据改变样式：

<template>
  <div>
    <div v-for="item in items" :key="item.id" :class="{ 'new-item': isNewItem(item), 'old-item': !isNewItem(item) }">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    let self = this;

    // 监听 WebSocket 消息
    socket.onmessage = function(event) {
      let data = JSON.parse(event.data);

      // 添加新数据
      self.items.push(data);
    };
  },
  computed: {
    // 判断数据是新数据还是旧数据
    isNewItem(item) {
      let index = this.items.indexOf(item);
      return index === this.items.length - 1;
    }
  }
}
</script>

<style>
.new-item {
  color: red;
}

.old-item {
  color: blue;
}
</style>

在上面的代码中，`isNewItem` 计算属性会根据数据在数组中的位置来判断数据是新数据还是旧数据，然后根据不同的情况绑定不同的样式类。同时，使用 `v-for` 来循环渲染数据，并使用 `:class` 绑定动态样式类。