Vue实现简单的发表评论功能

260 阅读 0 评论 172 点赞

我是靠谱客的博主疯狂夕阳，这篇文章主要介绍Vue实现简单的发表评论功能，现在分享给大家，希望可以做个参考。

本文实例为大家分享了Vue实现简单的发表评论功能的具体代码，供大家参考，具体内容如下

1、这是我在学习中的实例，有些的不足的地方，还望各位大佬指点，感谢哦~

2、发表评论的效果图

点击“发表”之后的效果（每条评论之后点击“删除”可以删掉这一整条评论~）

3、完整代码展示（我html结构写的比较乱，这里提醒大家一下，没有定义类的div是可以删掉的，我是因为方便写样式所以多加了div）

还是要提醒一下，不要忘记引入vue.js，目录记得根据自己存放的位置改

复制代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./vue.js"></script>
  <style type="text/css">
   *{
    margin: 0;padding: 0;
    box-sizing: border-box;
   }
   #app{
    width: 700px;
    height: 650px;
    margin: auto;
    border: 1px solid #ccc;
   }
   #app h1{
    width: 700px;
    font-weight: 400;
    line-height: 100px;
    padding-left: 20px;
    background-color: #cccccc;
    margin-bottom: 20px;
   }
   #app>div{
    padding: 0 20px;
   }
   #app>div>input{
    width: 200px;
    height: 30px;
    padding: 0 5px;
    margin: 5px 0;
   }
   #app>div>textarea{
    padding: 5px;
    margin-top: 5px;
   }
   .cont div{
    height: 50px;
    border: 1px solid #acacac;
    border-radius: 5px;
    padding: 0 10px;
   }
   .cont div span{
    padding: 0 5px;
    line-height: 50px;
   }
   .cont p{
    display: inline-block;
   }
   .cont div p:nth-of-type(1){
    color: #550000;
   }
   .cont div p:nth-of-type(2){
    color: #595959;
   }
   .cont .del{
    float: right;
    line-height: 50px;
    color: #003366;
    cursor: pointer;
   }
   .cont .del:hover{
    color: #550000;
   }
   .send{
    width: 80px;
    height: 30px;
    margin-top: 10px;
   }
   hr{
    border: 1px solid #bababa;
    margin: 15px 0;
   }
   h3{
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <h1>欢迎来到吐槽大厅</h1>
   <div>
    <label>用户名：</label><br>
    
    
    <input type="text" placeholder="用户名" v-model.trim="uname" /><br>
    <label>吐槽内容：</label><br>
    <textarea rows="2" cols="23" placeholder="吐槽内容" v-model.trim="tarea">

吐槽回复：

说:

删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="./vue.js"></script>
  <style type="text/css">
   *{
    margin: 0;padding: 0;
    box-sizing: border-box;
   }
   #app{
    width: 700px;
    height: 650px;
    margin: auto;
    border: 1px solid #ccc;
   }
   #app h1{
    width: 700px;
    font-weight: 400;
    line-height: 100px;
    padding-left: 20px;
    background-color: #cccccc;
    margin-bottom: 20px;
   }
   #app>div{
    padding: 0 20px;
   }
   #app>div>input{
    width: 200px;
    height: 30px;
    padding: 0 5px;
    margin: 5px 0;
   }
   #app>div>textarea{
    padding: 5px;
    margin-top: 5px;
   }
   .cont div{
    height: 50px;
    border: 1px solid #acacac;
    border-radius: 5px;
    padding: 0 10px;
   }
   .cont div span{
    padding: 0 5px;
    line-height: 50px;
   }
   .cont p{
    display: inline-block;
   }
   .cont div p:nth-of-type(1){
    color: #550000;
   }
   .cont div p:nth-of-type(2){
    color: #595959;
   }
   .cont .del{
    float: right;
    line-height: 50px;
    color: #003366;
    cursor: pointer;
   }
   .cont .del:hover{
    color: #550000;
   }
   .send{
    width: 80px;
    height: 30px;
    margin-top: 10px;
   }
   hr{
    border: 1px solid #bababa;
    margin: 15px 0;
   }
   h3{
    font-weight: 400;
    color: #333;
    margin-bottom: 10px;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <h1>欢迎来到吐槽大厅</h1>
   <div>
    <label>用户名：</label><br>
    <!-- .trim去除内容中的空格 -->
    <!-- v-model绑定表单的(uname)值 -->
    <input type="text" placeholder="用户名" v-model.trim="uname" /><br>
    <label>吐槽内容：</label><br>
    <textarea rows="2" cols="23" placeholder="吐槽内容" v-model.trim="tarea"></textarea><br>
    <!-- @click="",设置点击事件 -->
    <button class="send" @click="sendCont()">发表</button>
    <hr>
    <h3>吐槽回复：</h3>
    <!-- 遍历list数据 -->
    <div class="cont" v-for="val in list" :key="val.name">
     <div>
      <p>{{val.name}}</p><span>说:</span>
      <p>{{val.item}}</p>
      <p class="del" @click="delCont(val)">删除</p>
     </div>
    </div>
   </div>
  </div>
  <script type="text/javascript">
   new Vue({
    el:"#app",//指定模板
    data:{
     list:[
      {"name":"beibei","item":"妈妈,我想吃烤红薯"},
      {"name":"dian","item":"吃,吃大块的"},
     ],
     uname:"",
     tarea:"",
    },
    methods:{
     // "发表"按钮的点击事件
     sendCont(){
      // 创建一项清单
      var item = {name:this.uname,item:this.tarea};
      // 在list的前面添加item
      this.list.unshift(item);
      // 用户框，内容框清空
      this.uname="";
      this.tarea="";
     },
     // 评论最后的"删除"事件
     delCont(val){
      alert("确定删除？");
      // 查找val在list下标
      // value遍历的元素 当value的item/name值等于val的item/name值
      var ind = this.list.findIndex(value=>value.item===val.item);
      // 删除list第ind个
      this.list.splice(ind,1);
     }
    }
   })
  </script>
 </body>
</html>