1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="../lib/jquery2.1.4.min.js"></script>
10 <script src="../lib/Vue2.5.17.js"></script>
11 <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css">
12 </head>
13
14 <body>
15
16 <div id="app">
17 <comment @func="loadComments"></comment>
18 <ul class="list-group">
19 <li class="list-group-item" v-for="(item,index) in list" :key="index">
20 <span class="badge">评论人:{{ item.user }}</span>
21 {{ item.content }}
22 </li>
23 </ul>
24
25 </div>
26
27 <!-- 模板 -->
28 <template id="tmpl">
29 <div>
30 <div class="form-group form-inline">
31 <label for="">评论人：</label>
32 <input type="text" v-model="user" class="form-control">
33 </div>
34
35 <div class="form-group form-inline">
36 <label for="">评论内容：</label>
37 <textarea v-model="content" name="" id="" cols="30" rows="10" class="form-control"></textarea>
38 </div>
39
40 <div class="form-group form-inline">
41 <input type="button" class="btn btn-primary" @click="postComment" value="发表评论">
42 </div>
43 </div>
44 </template>
45
46 <script>
47 var commentBox = {
48 data(){
49 return {
50 user : ‘‘,
51 content : ‘‘
52 }
53 },
54 template: ‘#tmpl‘,
55 methods: {
56 postComment(){ //发表评论的方法
57 // 分析 发表评论的业务逻辑
58 // 1，评论数据放到 localStorage 中
59 // 2, 先组装一个最新的评论数据对象
60 // 3, 想办法把第二步中得到的评论对象保存到localStorage中
61 // 3.1 localStorage中只支持存放字符串，要先调用 JSON.stringify
62 // 3.2 在保存最新的评论数据之前，要先从localStorage获取到之前的评论数据（string）转换为一个数组对象。
63 //然后把最新的评论 push 到这个数组。(解决如果键相同值会覆盖的问题)
64 // 3.3 如果获取 localStorage中的评论字符串为空不存在，则可以返回一个 ‘[]‘ ,让JSON.parse转换
65 // 3.4 把最新的评论数组再次调用 JSON.stringify 转为数组字符串，然后调用localStorage.setItem()
66 var comment = { id : Date.now() , user : this.user , content : this.content };
67 //从localStorage中获取所有评论
68 var list = JSON.parse(localStorage.getItem(‘cmts‘) || ‘[]‘);
69 // list.push(comment);
70 list.unshift(comment);
71 //重新保存最新的评论数据
72 localStorage.setItem(‘cmts‘,JSON.stringify(list));
73 this.$emit(‘func‘);
74 this.user = this.content = ‘‘;
75 }
76 },
77 }
78
79 var vm = new Vue({
80 el: ‘#app‘,
81 data: {
82 list: [{
83 id: Date.now(),
84 user: ‘李白‘,
85 content: ‘天生我才必有用‘
86 },
87 {
88 id: Date.now(),
89 user: ‘江小白‘,
90 content: ‘劝君更尽一杯酒‘
91 },
92 {
93 id: Date.now(),
94 user: ‘小马‘,
95 content: ‘我姓马，马云的马‘
96 },
97 ]
98 },
99 created() { //在创建的时候就调用加载函数。
100 this.loadComments();
101 },
102 methods: {
103 loadComments(){ //从本地的localStorage中加载列表
104 var list = JSON.parse(localStorage.getItem(‘cmts‘) || ‘[]‘);
105 this.list = list;
106 }
107 },
108 components: {
109 comment: commentBox
110 }
111 })
112 </script>
113 </body>
114
115 </html>
原文地址：https://www.cnblogs.com/winter-shadow/p/10206603.html
时间： 2024-08-30 14:58:57