vue实现简单聊天窗口

最新推荐文章于 2025-07-08 10:17:14 发布

原创最新推荐文章于 2025-07-08 10:17:14 发布 · 2.3w 阅读

18 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

12 篇文章

订阅专栏

博客主要围绕前端开发展开，构建部分涉及输入框、提交按钮和历史消息展示的元素设置；实现部分包括将数据展示到界面、使界面数据动态变化以及数据刷新的操作，重点在于前端界面与数据的交互处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

构建：

输入：input
提交：button
历史消息展示：ul

实现：

数据展示到界面：data
界面数据动态变化：操作data
数据刷新： this.data = value

<div id="app">
        <ul>
            <li v-for="item in message_array">{{item}}</li>
        </ul>
        <input type="text" v-model="message"/>
        <button v-on:click="dealMessage">add</button>
</div>

new  Vue({
     el:"#app",
     data:{
         message_array:[],
         message:''
     },
     methods:{
         dealMessage: function () {
             this.message_array.push(this.message);
             this.message = '';
         }
     }
 })