vue实现评论发表
案例来源:黑马程序员vue教程在线视频教程:传送门<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="../js/vue.js" type="text/javascript" charset="utf-8"><
·
案例来源:黑马程序员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>
效果图:
更多推荐
已为社区贡献19条内容
所有评论(0)