vue实现评论发表

案例来源:黑马程序员vue教程
在线视频教程:传送门

功能:实现评论的发表,及更新
需要导入vue.js和bootstrap.min.css
也可以使用在线文件
vue.js

https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js

bootstrap.min.css

https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
	</head>

	<body>
		<div id="app">
			<discuss v-on:fun="loadComment" style="margin-bottom: 100px;"></discuss>
			<ul class="list-group">
				<li class="list-group-item" v-for="item in list" :key="item.id">
					{{item.content}}
					<span class="badge">评论人:{{item.name}}</span>
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			//定义发表评论的组件
			Vue.component('discuss', {
				template: `
						<div>
							<div class="form-group">
								<label>评论人:</label>
								<input type="text"  class="form-control"  v-model="name"/>
							</div>
							<div class="form-group">
								<label>评论内容:</label>
								<textarea class="form-control" v-model="content"></textarea>
							</div>
							<input type="button" value="发表评论" class="btn btn-primary" @click="postContent"  />
						</div>
					`,
				data: function() {
					return {
						name: '',
						content: ''
					}
				},
				methods: {
					//提交数据的函数
					postContent() {
						//分析
						//1、将数据保存到localStorage中
						//2、组织一个最新的评论数据对象
						//3、把第二步中得到的评论对象保存到localStorage中
						//3.1 localStorage只支持字符串数据,要先调用JSON.stringify
						//3.2在保存最新数据之前,要先从localStorage获取之前存储的数据,将其转换为一个数组,再将最新评论添加到数组中
						//3.3 将评论列表数组,转换为数组字符串,再添加到localStorage中

						var comment = { //评论对象
							id: Date.now(),
							name: this.name,
							content: this.content
						}
						//获取所有评论,如果为空返回个空数组
						var list = JSON.parse(localStorage.getItem("item") || '[]')
						list.unshift(comment) //添加最新评论,添加到数组最前面
						//保存最新数据
						localStorage.setItem("item", JSON.stringify(list))
						this.name = this.content = ''
						this.$emit('fun')
					}
				}
			})

			//vue实例
			new Vue({
				el: '#app',
				data: {
					list: []
				},
				methods: {
					//从localStorage中加载数据
					loadComment() {
						var list = JSON.parse(localStorage.getItem("item") || '[]')
						this.list = list
					}
				},
				created() {
					this.loadComment()
				}
			})
		</script>
	</body>
</html>

效果图:
vue实现评论发表_第1张图片

你可能感兴趣的:(vue基础)