vueとElement-plusを使ってリアルタイム更新とリアルタイム表示を実現する方法

<template>
  <div>
    <input v-model="message" placeholder="请输入消息" />
    <button @click="sendMessage">发送</button>
    <ul>
      <li v-for="msg in messages" :key="msg.id">
        {{ msg.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: [
        { id: 1, text: '消息1' },
        { id: 2, text: '消息2' },
        { id: 3, text: '消息3' }
      ]
    }
  },
  methods: {
    sendMessage() {
      if (this.message) {
        this.messages.push({ id: Date.now(), text: this.message })
        this.message = ''
      }
    }
  }
}
</script>

<template>
  <div>
    <el-button @click="showDialog">显示对话框</el-button>
    <el-dialog v-model="dialogVisible" title="消息对话框">
      <ul>
        <li v-for="msg in messages" :key="msg.id">
          {{ msg.text }}
        </li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { id: 1, text: '消息1' },
        { id: 2, text: '消息2' },
        { id: 3, text: '消息3' }
      ],
      dialogVisible: false
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    }
  }
}
</script>

<template>
  <div>
    <ul>
      <li v-for="msg in messages" :key="msg.id">
        {{ msg.text }}
        <el-tooltip :content="msg.updatedAt" placement="top" effect="dark"></el-tooltip>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { id: 1, text: '消息1', updatedAt: '2021-01-01 10:00:00' },
        { id: 2, text: '消息2', updatedAt: '2021-01-01 10:01:00' },
        { id: 3, text: '消息3', updatedAt: '2021-01-01 10:02:00' }
      ]
    }
  }
}
</script>