聊天对话框(与自己的灵魂对话)

最新推荐文章于 2024-09-13 09:04:16 发布

代序春秋

最新推荐文章于 2024-09-13 09:04:16 发布

阅读量4k

点赞数 1

分类专栏： vue.js

本文链接：https://blog.csdn.net/geek64581/article/details/102476032

版权

本文介绍了如何利用Vue.js来实现一个聊天对话框，重点强调了函数作用域的重要性，避免因作用域问题导致的错误，同时展示了实现后的效果图。

摘要由CSDN通过智能技术生成

文章目录

- - 1.1 用vue实现聊天对话框
  - 1.2 效果图

1.1 用vue实现聊天对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .talk_con {
   
            width: 600px;
            height: 500px;
            border: 1px solid #666;
            margin: 50px auto 0;
            background: #f9f9f9;
        }

        .talk_show {
   
            width: 580px;
            height: 420px;
            border: 1px solid #666;
            background: #fff;
            margin: 10px auto 0;
            overflow: auto;
        }

        .talk_input {
   
            width: 580px;
            margin: 10px auto 0;
        }

        .whotalk {
   
            width: 80px;
            height: