标签：rip creat component create ring 方法 发表 com row
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>
标签：rip creat component create ring 方法 发表 com row
原文地址：https://www.cnblogs.com/winter-shadow/p/10206603.html
