Vue实现简单的发表评论功能
更新时间：2021年10月29日 11:36:33 作者：一个小点点.
这篇文章主要为大家详细介绍了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>
<!-- .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>
4、到底啦，祝大家能够学的愉快，再见
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue2.0+使用md-edit编辑器的解决方案，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2024-02-02
这篇文章介绍了Vue.js中v-on指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue的hash值原理也是table切换,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了vue表单验证之禁止input输入框输入空格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了vue中项目如何提交form格式数据的表单，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue 插槽 (Slots) 源码解析与用法,通过实例,我们全面了解了默认插槽、具名插槽和作用域插槽的用法,并深入理解了其在Vue源码中的实现原理,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了vue 中简单使用mock的方法，本文通过图文实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-02-02
对于Vue项目来说，如果遇到一个埋点的需求，我们最好的解决方案就是封装一个指令，所以本文就来和大家详细讲讲具体是如何封装埋点指令的吧2023-08-08
这篇文章主要为大家介绍了Vue2 中自定义图片懒加载指令 v-lazy实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
本文主要介绍了element滚动条组件el-scrollbar的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
最新评论