评论列表案例

最新推荐文章于 2022-11-08 17:34:27 发布

junlingshiwo

最新推荐文章于 2022-11-08 17:34:27 发布

阅读量190

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45722135/article/details/119009463

版权

这个案例聚焦于创建评论列表的功能，包括输入文本后通过回车或搜索按钮发布评论。评论可以追加在现有评论之前或之后，并通过点击特定评论来删除，利用JavaScript数组的splice方法和索引来完成这一操作。

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

此案例想要的就是我们在输入框中输入文本，可以显示或者可以删除评论。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <style>
        *{ padding:0; margin:0;outline: none; box-sizing: border-box;}
        .out{ width:550px; min-height: 200px; margin:100px auto; border:1px solid #eee; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.1); padding:30px;}
        .search{display: flex; padding-bottom:30px;}
        .search .ipt{ height: 36px; border:none; background: #eee; border-radius: 3px; padding:0 10px; font-size:16px; color:#666; width:80%;letter-spacing: 0.1em;}
        .search .btn{ height: 36px; width:20%; border:none; background: #4FC08D; color:#fff; font-size:16px; cursor: pointer;}
        .out .row{ border-bottom:1px solid #eee;border-top:1px solid #eee; hei