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、到底啦，祝大家能够学的愉快，再见
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue实现评论列表功能
具体代码如下所示: <!DOCTYPE html> <html> <head> <title>简易评论列表</title> <meta charset="utf-8"> <link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css" rel="external nofoll
-
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下所示: 有一张user表和留言表,关系为一对多,留言表有父留言字段的id,和自身有一个一对多的关系,建表语句如下: CREATE TABLE `message` ( `id` int NOT NULL AUTO_INCREMENT, `date` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, `content` text
-
简易Vue评论框架的实现(父组件的实现)
最近看到一个需求: 实现一个评论功能,要求对评论列表进行分页显示 对相应模块实现组件化 能显示发布者.发布时间以及内容 乍一看不是很难,但是在具体的实现上还是遇到了一些问题.此外,因为第一次使用 vue ,看文档看的也是一脸懵逼,话不多说,下面来分析一下,具体每个模块是怎么实现的. 源码地址 评论表单代码: <!-- 文档结构区开始 --> <template> <div id="comment" > <UserDiv @transferUse
-
Vuepress 搭建带评论功能的静态博客的实现
vuepress 是 Vue 驱动的静态站点生成工具 本文仅介绍,搭建静态博客的过程,具体教程及文档请点击进入 vuepress中文网 点击查看项目代码 vuepress初始化 下面初始化 # 将 github 新创建的仓库克隆到本地 git clone git@github.com:zhb333/readme-blog.git # 进入项目 cd readme-blog # npm 初始化, 按照提示回车 npm init # 安装 vuepress npm i vuepress -D # 安
-
Vue.js实现文章评论和回复评论功能
本来想把这个页面用jade渲染出来.评论部分用vue,但是想了想觉得麻烦,最后还是整个用vue的组件搞定他吧. 先上在线demo:http://jsbin.com/ceqifo/1/edit?js,output 再上效果图 可直接评论,点击别人的评论能回复别人的评论. html <div id="comment"> <article-content v-bind:article="article"></article-content&g
-
mpvue微信小程序开发之实现一个弹幕评论
先上图 就是一个简单的弹幕发送功能 弹幕区的页面: <div class="content" v-show="doommData.length"> <div class="textLeft"></div> <div class="textItem"> <p class="text aon" v-if="item.display" v-
-
vue.js评论发布信息可插入QQ表情功能
本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下 demo例子: HTML文本内容: <template> <div id="publish"> <!-- 发布内容输入框,利用Html5的新属性contenteditable,实现可编辑文本 ,会自动将插入的IMG标签解析--> <div class="publish_container"> <p contenteditable
-
vue.js实现用户评论、登录、注册、及修改信息功能
vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo
-
Vue实现简单的发表评论功能
本文实例为大家分享了Vue实现简单的发表评论功能的具体代码,供大家参考,具体内容如下 1.这是我在学习中的实例,有些的不足的地方,还望各位大佬指点,感谢哦~ 2.发表评论的效果图 点击"发表"之后的效果(每条评论之后点击"删除"可以删掉这一整条评论~) 3.完整代码展示(我html结构写的比较乱,这里提醒大家一下,没有定义类的div是可以删掉的,我是因为方便写样式所以多加了div) 还是要提醒一下,不要忘记引入vue.js,目录记得根据自己存放的位置改 <!D
-
jQuery实现的简单无刷新评论功能示例
本文实例讲述了jQuery实现的简单无刷新评论功能.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无刷新评论 - www.jb51.net</title> <script src="jquery-1.7.2.min.js" type="text/javascript"></scr
-
小程序实现发表评论功能
本文实例为大家分享了小程序实现发表评论功能的具体代码,供大家参考,具体内容如下 1.点击发表按钮 判断内容是否为空 如果为空提示请输入内容 2.如果内容不为空 将评论框里输入的内容的值传入评论列表 <view wx:for="{{release}}" class='shoppcall comment' data-id="{{item.id }}"> <button class='revoke' bindtap='binddelete' data-i
-
vue组件实现发表评论功能
本文实例为大家分享了vue组件实现发表评论的具体代码,供大家参考,具体内容如下 今天看了vue相关的视频,所以跟着做一个小demo把知识串联起来,内容很简单但是也算是学习道路上的一点进步. 1 思路分析 发表评论模块写入一个组件,提高复用性.关键点: 1).子组件通过localStorage向父组件传值2).子组件有自己的data存储user和content,即评论人和评论内容,也就是dom元素绑定的数据.3).点击‘发表评论’后,首先是将各条评论存入localStorage,然后通过在组件出绑
-
vue实现发表评论功能
本文实例为大家分享了vue实现发表评论的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="bootstrap-3.3.7.css" /> <title></title
-
vue实现简单图片上传功能
本文实例为大家分享了vue实现简单图片上传的具体代码,供大家参考,具体内容如下 就是给自己留个参照,有什么不合理的地方请大家指出来,然后调整 1.效果展示 2.html相关的代码展示 <div class="form-list"> <label class="label-one">商品图片</label> <div class="add-picture">
-
vue实现简单实时汇率计算功能
最近在自己摸索vue的使用,因为相对于只是去看教程和实例,感觉不如自己动手写一个demo入门来的快.刚好看到小程序中有一个简单但是很精致的应用极简汇率,而且它的表现形式和vue的表现形式很像,于是想着自己搞一个简单的应用来试试. 1.第一步是搭好简单的Html结构 <div id="demo"> <h1>汇率转换</h1> <div class="moneyBox"><span>cny</span&g
-
基于node+vue实现简单的WebSocket聊天功能
首先,我需要用到node的nodejs-websocket模块 使用yarn进行安装 yarn add nodejs-websocket --save 当然,你也可以用npm进行安装 npm i nodejs-websocket --save 安装完毕之后,我们开始写服务端的代码,首先,我用node在本地起了一个node服务器用来开启websocket服务 sock.js: let ws = require("nodejs-websocket"); console.log("
-
JavaScript实现简单评论功能
本文实例为大家分享了JavaScript实现简单评论功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ /*background-image: url(../img/91R58PIC3n2_1024