vue笔记之组件案例-实现评论的发表和自动刷新列表

最新推荐文章于 2024-08-14 10:34:33 发布

qq_36781179

最新推荐文章于 2024-08-14 10:34:33 发布

阅读量1.7k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/qq_36781179/article/details/82899258

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style type="text/css">
	
	</style>
</head>
<body>
	<div id="app">
		<commentBox @func="loadComments"></commentBox>
		<ul class="list-group">
			<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="tmpl">
		<div>
			<div class="form-group">
				<label for="">评论人：</label>
				<input type="text" name="" class="form-control" v-model="user">
			</div>
			<div class="form-group">
				<label for="">评论内容：</label>
				<textarea class="form-control" v-model="content"></textarea>
			</div>
			<div class="form-group">
				<input type="button" value="发表评论" name="" class="btn btn-primary" @click="postComment">
			</div>
		</div>
	</template>
	<script>
		var commentBox = {
			template:"#tmpl",
			data:{
				return {
					user:"",
					content:""
				}
				
			},
			created() {
				this.loadComments()
			},
			methods: {
				postComment () {
					//评论的数据存放在localStorage中,localStorage只支持存放字符串数据，要先调用JSON.stringify
					//先组织出一个最新的评论数据对象
					var comment = { id:Date now(),user:this.user,content:this.content };
					//从localStronger中获取所有的评论，如果获取到 localStorage 中的 评论字符串，为空不存在，则可以返回一个'[]'让JSON.parse去转换
					var list = JSON.parse(localStorage.getItem('cmts') || '');
					//在保存最新的评论数据之前，要先从localStorage获取到之前的评论数据（string）,转换为一个数组对象，然后，把最新的评论push到这个数组
					list.unshift(comment);
					//把最新的评论列表数组，再次调用JSON.stringify转为数组字符串，然后调用localStorage.setItem()
					localStorage.setItem('cmts',JSON.stringify(list))
					this.user = this.content = "";
					//自动刷新
					this.$emit("func");
				}
			}
		}
		var vm = new Vue ({
			el:'#app',
			data:{
				list:[
					{id:Date.now(),user:'李白',content:'天生我材必有用'},
					{id:Date.now(),user:'江小白',content:'劝君更尽一杯酒'},
					{id:Date.now(),user:'小马',content:'我姓马'},
				]
			},
			methods:{
				loadComments () {//从本地的localStronger中，加载评论列表
					var list = JSON.parse(localStorage.getItem('cmts') || "");
					this.list = list;
				}
			},
			components:{
				commentBox
			}
			
		});
		
	</script>
</body>
</html>