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` 绑定动态样式类。