如何使用 Vue 和 Element Plus 实现实时更新和实时显示 引言: 在很多场景下,我们需要实现实时更新和实时显示的功能,例如聊天应用、实时数据展示等。本文将详细介绍如何使用 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> 在上面的代码中,我们使用了 v-model 绑定了一个输入框的值,当用户输入信息后,点击发送按钮,将信息添加到 二、实时显示数据 <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> 在上面的代码中,我们通过点击按钮来显示对话框,对话框内部的内容使用了 v-for 指令进行循环渲染。当点击按钮时,将 三、使用 Element Plus 提供的实时更新组件 以下是一个使用 <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> 在上述代码中,我们使用了 结论: |