这是我第一次写博客,写得不好请原谅
本章简介
因为最近在学习Vue,感觉还不错,但仅仅局限初级的,为此非常抱歉。一些简单的示例还是比较不错的,分享给你们,希望你们有收获!
本章使用localStorage进行存储,功能方面实现了两个功能:1.发表评论;2.删除评论
准备工作
首先是js文件,Vue.js(链接的官网),本章会使用,没有的各位可以通过点击进行下载!
其次是本章使用的样式css文件是bootstrap,没有的各位也可进行点击下载!
浏览器工具:我使用的谷歌(chrome)浏览器;编辑软件:Visual Studio Code
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件案例-评论列表</title>
<script src="./lib/vue.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app" class="container">
<h1>评论</h1>
<cmt-box @func="loadComments"></cmt-box>
<ul class="list-group">
<li class="list-group-item" v-for="(item, i) in list" :key="item.id" @click="del(item.id)">
<span class="badge">评论人:{{ item.user }}</span>
{{ item.content }}
</li>
</ul>
</div>
<template id="tmp1">
<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" class="btn btn-primary" value="发表评论" @click="postComment">
</div>
</div>
</template>
<script>
var commentBox = {
template: '#tmp1',
data(){
return{
user: '',
content: ''
}
},
methods: {
postComment(){ // 发表评论的方法
// 分析:发表评论的业务逻辑
// 1. 评论数据保存到 localStorage
// 2. 先组织出一个最新的评论数据对象
// 3. 先把第二步中得到的评论对象,保存到 localStorage
// 3.1 localStorage 只支持存放字符串数据,要先调用 JSON.stringify
// 3.2 在保存最新的评论数据之前,要先从localStorage获取到之前的评论数据(string),转换为 一个 数组对象,然后把最新的评论push(或unshift)到这个数组,push是将其加在后面而unshift是将其加载到前面
// 3.3 如果获取到的 localStorage 中的评论字符串,为空不存在,则可以返回一个'[]' 让 JSON.parse 去转换
// 3.4 把最新的评论列表数组,再次调用JSON.stringify转为数组字符串,然后调用 localStorage.setItem()
var comment = { id: Date.now(), user: this.user, content: this.content }
// 这是从 localStorage 中获取所有的评论
var list = JSON.parse(localStorage.getItem('cmts') || '[]')
list.unshift(comment)
// 重新保存最新的评论数据
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(){ // 从本地的 localStorage 中,加载评论列表
var list = JSON.parse(localStorage.getItem('cmts') || '[]')
// 将查询出来的数据加载到 vm 实例的data数据的list集合中去
this.list = list
},
del(id){
// 删除集合中的某一个数据的两种方式
// 第一种方式
this.list.some((item,i)=>{
if(item.id == id){
// 通过splice的方式将this.list集合中以索引 i 将其删除
this.list.splice(i, 1)
localStorage.setItem('cmts', JSON.stringify(this.list))
return true
}
})
// 第二种方式
// var index = this.list.findIndex(item => {
// if (item.id == id) {
// return true;
// }
// })
// this.list.splice(index, 1)
// localStorage.setItem('cmts', JSON.stringify(this.list))
}
},
components: {
'cmt-box': commentBox
},
// 在vm实例中,生命周期为created中初始化评论列表
created() {
this.loadComments()
}
})
</script>
</body>
</html>
补充(localStorage)
在本章中,这个 localStorage 给各位贴出,忘记写了,抱歉
结束语
本次的分享就结束了,有错的地方或不对的,请给位大佬不吝啬的指出,谢谢各位了,再见!!!