Vue系列之 => 評論功能(小知識點串聯)
阿新 • • 發佈：2019-01-02
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> 2425 </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>
