功能需求分析

  • 可以输入评论提交
  • 可以查看删除已经评论的记录
  • 统计评论的条数

编写代码

静态页面

首先先写一个静态页面，将一些样式准备好:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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; height: 40px; display: flex; align-items: center;font-size:16px; justify-content: space-between;margin-top:-1px;color:#333;}
        .out .row .close{ font-size:22px; font-family: "宋体"; color:#FF976A; display: none; cursor: pointer;}
        .out .row:hover .close{ display: block;}
        .out .num{ padding-top:20px; color:#555; text-align: center;}
        .out .num b{ display: inline-block; padding:0 3px;}
        .out .comment{ font-size:16px; color:#999; text-align: center;}
    </style>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="out">
            <div class="search">
                <input type="text" class="ipt">
                <input type="button" class="btn" value="评论">
            </div>
            <div class="row">
                这是一条内容1
                <div class="close">×</div>
            </div>
            <div class="row">
                这是一条内容2
                <div class="close">×</div>
            </div>

            <div class="num">共<b>2</b>条评论</div>
            <div class="comment">暂无评论</div>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{},
            methods: {
                
            },
        })
    </script>
    
</body>
</html>

观察页面:
image.png

交互实现

首先新建一个数组用来存放评论记录，然后使用for循环在页面中展示数组中的评论。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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; height: 40px; display: flex; align-items: center;font-size:16px; justify-content: space-between;margin-top:-1px;color:#333;}
        .out .row .close{ font-size:22px; font-family: "宋体"; color:#FF976A; display: none; cursor: pointer;}
        .out .row:hover .close{ display: block;}
        .out .num{ padding-top:20px; color:#555; text-align: center;}
        .out .num b{ display: inline-block; padding:0 3px;}
        .out .comment{ font-size:16px; color:#999; text-align: center;}
    </style>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="out">
            <div class="search">
                <input type="text" class="ipt">
                <input type="button" class="btn" value="评论">
            </div>
            <div class="row" v-for='item in arrs'>
                {{item}}
                <div class="close">×</div>
            </div>


            <div class="num">共<b>2</b>条评论</div>
            <div class="comment">暂无评论</div>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                arrs:["阿呆yyds","哈哈", "呵呵"]
            },
            methods: {
                
            },
        })
    </script>
    
</body>
</html>
  • 第43行新建数组
  • 第29行使用for循环读取数组评论并展示

测试页面:
image.png

统计评论条数

  • 当评论条数为0时显示暂无评论
  • 当评论条数大于0时显示评论的数量

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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; height: 40px; display: flex; align-items: center;font-size:16px; justify-content: space-between;margin-top:-1px;color:#333;}
        .out .row .close{ font-size:22px; font-family: "宋体"; color:#FF976A; display: none; cursor: pointer;}
        .out .row:hover .close{ display: block;}
        .out .num{ padding-top:20px; color:#555; text-align: center;}
        .out .num b{ display: inline-block; padding:0 3px;}
        .out .comment{ font-size:16px; color:#999; text-align: center;}
    </style>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="out">
            <div class="search">
                <input type="text" class="ipt">
                <input type="button" class="btn" value="评论">
            </div>
            <div class="row" v-for='item in arrs'>
                {{item}}
                <div class="close">×</div>
            </div>


            <div class="num" v-if="arrs.length">共<b>{{arrs.length}}</b>条评论</div>
            <div class="comment" v-else>暂无评论</div>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                arrs:["阿呆yyds","哈哈", "呵呵"]
            },
            methods: {
                
            },
        })
    </script>
    
</body>
</html>
  • 第35、36行使用v-if和v-else来判断显示评论数量还是显示暂无评论

测试页面:
image.png
成功显示实际评论数

删除评论

点击评论旁的×号即可删除该评论。

将删除按钮绑定点击事件，然后获取目标评论在数组中的索引值，然后对数组中的元素进行删除操作。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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; height: 40px; display: flex; align-items: center;font-size:16px; justify-content: space-between;margin-top:-1px;color:#333;}
        .out .row .close{ font-size:22px; font-family: "宋体"; color:#FF976A; display: none; cursor: pointer;}
        .out .row:hover .close{ display: block;}
        .out .num{ padding-top:20px; color:#555; text-align: center;}
        .out .num b{ display: inline-block; padding:0 3px;}
        .out .comment{ font-size:16px; color:#999; text-align: center;}
    </style>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="out">
            <div class="search">
                <input type="text" class="ipt">
                <input type="button" class="btn" value="评论">
            </div>
            <div class="row" v-for='(item,key) in arrs'>
                {{item}}
                <div class="close" @click="btnClose(key)">×</div>
            </div>


            <div class="num" v-if="arrs.length">共<b>{{arrs.length}}</b>条评论</div>
            <div class="comment" v-else>暂无评论</div>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                arrs:["阿呆yyds","哈哈", "呵呵"]
            },
            methods: {
                btnClose(key){
                    // 接收传递过来的数组的索引
                    this.arrs.splice(key,1)
                }
            },
        })
    </script>
    
</body>
</html>
  • 29-32行for循环时，读取元素值与元素的索引值，并且传递给btnClose方法用于删除对应的评论

测试页面:
点击评论的删除按钮，成功删除该评论
image.png

追加评论

首先使用v-model绑定输入栏写入的评论，然后点击评论按钮将输入栏中的评论追加进评论数组中,追加完成之后还需要清空input输入框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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; height: 40px; display: flex; align-items: center;font-size:16px; justify-content: space-between;margin-top:-1px;color:#333;}
        .out .row .close{ font-size:22px; font-family: "宋体"; color:#FF976A; display: none; cursor: pointer;}
        .out .row:hover .close{ display: block;}
        .out .num{ padding-top:20px; color:#555; text-align: center;}
        .out .num b{ display: inline-block; padding:0 3px;}
        .out .comment{ font-size:16px; color:#999; text-align: center;}
    </style>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="out">
            <div class="search">
                <input type="text" class="ipt" v-model="iptVal">
                <input type="button" class="btn" value="评论" @click="pushData">
            </div>
            <div class="row" v-for='(item,key) in arrs'>
                {{item}}
                <div class="close" @click="btnClose(key)">×</div>
            </div>


            <div class="num" v-if="arrs.length">共<b>{{arrs.length}}</b>条评论</div>
            <div class="comment" v-else>暂无评论</div>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                iptVal:"",
                arrs:["阿呆yyds","哈哈", "呵呵"]
            },
            methods: {
                btnClose(key){  // 删除评论
                    // 接收传递过来的数组的索引
                    this.arrs.splice(key,1)
                },
                pushData(){  // 添加评论
                    this.arrs.unshift(this.iptVal)
                    this.iptVal=""  //追加之后清空输入框
                }
            },
        })
    </script>
    
</body>
</html>
  • 第26行使用v-model将输入框内容与变量iptVal绑定
  • 第27行将评论提交按钮绑定提交事件pushData
  • 51-53行pushData方法使用unshift将评论内容追加到数组第一位

测试页面:
image.png

回车提交评论

使用按键修饰符，在输入框敲入回车键时提交输入内容

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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; height: 40px; display: flex; align-items: center;font-size:16px; justify-content: space-between;margin-top:-1px;color:#333;}
        .out .row .close{ font-size:22px; font-family: "宋体"; color:#FF976A; display: none; cursor: pointer;}
        .out .row:hover .close{ display: block;}
        .out .num{ padding-top:20px; color:#555; text-align: center;}
        .out .num b{ display: inline-block; padding:0 3px;}
        .out .comment{ font-size:16px; color:#999; text-align: center;}
    </style>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="out">
            <div class="search">
                <input type="text" class="ipt" v-model="iptVal" @keyup.enter="pushData">
                <input type="button" class="btn" value="评论" @click="pushData">
            </div>
            <div class="row" v-for='(item,key) in arrs'>
                {{item}}
                <div class="close" @click="btnClose(key)">×</div>
            </div>


            <div class="num" v-if="arrs.length">共<b>{{arrs.length}}</b>条评论</div>
            <div class="comment" v-else>暂无评论</div>
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                iptVal:"",
                arrs:["阿呆yyds","哈哈", "呵呵"]
            },
            methods: {
                btnClose(key){  // 删除评论
                    // 接收传递过来的数组的索引
                    this.arrs.splice(key,1)
                },
                pushData(){  // 添加评论
                    this.arrs.unshift(this.iptVal)
                    this.iptVal=""  //追加之后清空输入框
                }
            },
        })
    </script>
    
</body>
</html>
  • 第26行使用keyup.enter绑定pushData方法用来添加评论
最后修改：2024 年 03 月 13 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏