vue websocket 每次推的新数据改变样式

当 Vue 组件接收到 WebSocket 推送的新数据时，你可以在组件中的相应方法中修改数据，然后利用 Vue 的数据绑定功能来更新页面上的样式。

例如，你可以在 Vue 组件的 `created` 生命周期钩子中创建 WebSocket 连接，然后在 `mounted` 生命周期钩子中监听 WebSocket 推送的新数据，并在回调函数中修改 Vue 组件中的数据：

export default {
  data() {
    return {
      messages: []
    }
  },
  created() {
    const ws = new WebSocket('ws://localhost:8080')
    ws.onopen = () => console.log('WebSocket connected')
    this.ws = ws
  },
  mounted() {
    this.ws.onmessage = (event) => {
      const message = JSON.parse(event.data)
      this.messages.push(message)
    }
  }
}

在上面的代码中，`messages` 是一个数组，用于存储 WebSocket 推送的所有消息。在 `mounted` 生命周期钩子中，我们监听 WebSocket 的 `onmessage` 事件，并在回调函数中将新消息添加到 `messages` 数组中。

接下来，你可以在 Vue 组件的模板中使用 `v-for` 指令来循环渲染 `messages` 数组中的每个消息，并根据消息内容来改变样式：

<template>
  <div>
    <div v-for="(message, index) in messages" :key="index" :class="{ 'new-message': message.new }">
      {{ message.text }}
    </div>
  </div>
</template>

<style>
.new-message {
  font-weight: bold;
  color: red;
}
</style>

在上面的代码中，我们使用了 `v-for` 指令来循环渲染 `messages` 数组中的每个消息，并根据消息对象中的 `new` 属性来为新消息添加 `new-message` 类名。在样式表中，我们定义了 `new-message` 类名的样式，使新消息以粗体红色字体显示。