vue实现评论列表功能
作者:angle-xiu 发布时间:2023-07-02 17:05:29
标签:vue,评论列表
具体代码如下所示:
<!DOCTYPE html>
<html>
<head>
<title>简易评论列表</title>
<meta charset="utf-8">
<link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<div id="app">
<ul class="list-group">
<!-- 为事件绑定别称时不要使用驼峰命名 -->
<box @plocalcoments="localComents"></box>
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论人: {{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<template id="temp">
<div>
<div class="form-group">
<label>评论人:</label>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<label>评论内容:</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary" @click="add">
</div>
</div>
</template>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
let commentBox = {//定义评论组件
data(){//进行数据的绑定,记住组件内的数据是一个方法
return{
user:'',
content:''
}
},
template:"#temp",
methods:{
add(){//评论添加函数
//获取当前评论
let comment = {id:Date.now(),user:this.user,content:this.content};
//从localStorage读取列表
let list = JSON.parse(localStorage.getItem('cmts')|| '[]');//若不存在cmts则返回空数组,避免json解析出错
if(comment.user&&comment.content)//进行判空
list.unshift(comment);
localStorage.setItem('cmts',JSON.stringify(list));
this.user=this.content='';//清空评论列表
//利用$emit()方法来调用父组件的方法
this.$emit('plocalcoments');
}
}
}
let vm = new Vue({
el:"#app",
data:{
list:[]
},
components:{
box:commentBox
},
created(){
//实例创建后加载评论
this.localComents();
},
methods:{
localComents(){
let list = localStorage.getItem('cmts'||'[]');//若不存在cmts则返回空数组,避免json解析出错
this.list = JSON.parse(list);//刷新数据
}
}
});
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>简易评论列表</title>
<meta charset="utf-8">
<link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<div id="app">
<ul class="list-group">
<!-- 为事件绑定别称时不要使用驼峰命名 -->
<box @plocalcoments="localComents"></box>
<li class="list-group-item" v-for="item in list" :key="item.id">
<span class="badge">评论人: {{item.user}}</span>
{{item.content}}
</li>
</ul>
</div>
<template id="temp">
<div>
<div class="form-group">
<label>评论人:</label>
<input type="text" class="form-control" v-model="user">
</div>
<div class="form-group">
<label>评论内容:</label>
<textarea class="form-control" v-model="content"></textarea>
</div>
<div class="form-group">
<input type="button" value="发表评论" class="btn btn-primary" @click="add">
</div>
</div>
</template>
</body>
<script src="node_modules\vue\dist\vue.js"></script>
<script>
let commentBox = {//定义评论组件
data(){//进行数据的绑定,记住组件内的数据是一个方法
return{
user:'',
content:''
}
},
template:"#temp",
methods:{
add(){//评论添加函数
//获取当前评论
let comment = {id:Date.now(),user:this.user,content:this.content};
//从localStorage读取列表
let list = JSON.parse(localStorage.getItem('cmts')|| '[]');//若不存在cmts则返回空数组,避免json解析出错
if(comment.user&&comment.content)//进行判空
list.unshift(comment);
localStorage.setItem('cmts',JSON.stringify(list));
this.user=this.content='';//清空评论列表
//利用$emit()方法来调用父组件的方法
this.$emit('plocalcoments');
}
}
}
let vm = new Vue({
el:"#app",
data:{
list:[]
},
components:{
box:commentBox
},
created(){
//实例创建后加载评论
this.localComents();
},
methods:{
localComents(){
let list = localStorage.getItem('cmts'||'[]');//若不存在cmts则返回空数组,避免json解析出错
this.list = JSON.parse(list);//刷新数据
}
}
});
</script>
</html>
效果图:
总结
以上所述是小编给大家介绍的vue实现评论列表功能,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://www.cnblogs.com/angle-xiu/archive/2019/10/25/11736880.html
0
投稿
猜你喜欢
- 下载代码Cookie池(这里主要是微博登录,也可以自己配置置其他的站点网址)下载代码GitHub:https://github.com/Py
- 手残更新Pycharm 2020.1 版时将配置文件都删除了😂;在此重新记录下配置!安装教程参考:idea2020.1最新版永久破解/pyc
- mssql的每个varchar、text字段都被自动插入一段js代码,即使删除这段代码,如果没有从源头上解决,几分钟后,js代码就又会自动插
- 如下所示:import urllib,json,requestsurl = 'http://127.0.0.1:8000/accou
- 前言在SQL Server中,我们知道一个SELECT语句执行过程中只会申请一些意向共享锁(IS) 与共享锁(S), 例如我使用SQL Pr
- 如下所示:#简单来说 LabelEncoder 是对不连续的数字或者文本进行编号from sklearn.preprocessing imp
- Golang Goroutine和线程的区别 Golang,轻松学习一、Golang Goroutine?当使用者分配足够多的任务,系统能自
- 一. 通过 ConfigProto 设置多线程 (具体参数功能及描述见 tensorflow/core/protobuf/config.pr
- 1.数据采集和标记先采集数据,再对数据进行标记。其中采集数据要就有代表性,以确保最终训练出来模型的准确性。2.特征选择选择特征的直观方法:直
- Anaconda 是一个基于 Python 的数据处理和科学计算平台,它已经内置了许多非常有用的第三方库,装上Anaconda,就相当于把
- 这样还能减少CPU缓存命中失效的问题(点击这个链接来查看CPU的缓存是如何工作的以及MESI协议)。下面让我们来揭穿三个有关NULL位图的普
- 简介mysql应该是我们在日常工作中使用到的一个非常普遍的数据库,虽然mysql现在是oracle公司的,但是它是开源的,市场占有率还是非常
- threading用于提供线程相关的操作,线程是应用程序中工作的最小单元。python当前版本的多线程库没有实现优先级、线程组,线程也不能被
- PHP 备份 mysql 数据库的源代码,在完善的 PHP+Mysql 项目中,在后台都会有备份 Mysql 数据库的功能,有了这个功能,对
- jquery基本入门 第一天:选择器相关 1.html()与.text() .html()取得第一个匹配元素的html内容。会带有标签,.t
- 一、总结说明Windows环境安装:paramunittest cmd输入命令:pip install paramunittest总结说明:
- 优点:·减少使用空间·使后面的背景层模糊或者渐隐出现让用户的焦点集中在当前层。什么时候使用(对话框等)模式窗口?·图片/视频灯箱效果·联系表
- 一 使用SELECT子句进行多表查询SELECT 字段名 FROM 表1,表2 …&nbs
- 1.使用jobsName.ini文件保存要创建job的名字jobs1jobs2jobs32.使用Jenkins创建job时自动生成的conf
- 本文实例讲述了Python中文竖排显示的方法。分享给大家供大家参考。具体如下:这里将中文竖排显示比如 衣食者人之生利也,然且犹尚有节,葬埋者