Vue運用本地儲存實現評論發表
阿新 • • 發佈:2018-12-15
<div id="app"> <div class="box"> name:<input type="text" v-model="name"> text:<input type="text" v-model="text"> <button @click="go">提交評論</button> </div> <ul> <li v-for="item in list" :key="item.id"> {{item.text}}<span>{{item.name}}</span> </li> </ul> </div> <script> var vm=new Vue({ el:'#app', data:{ text:'', name:'', list:[ { id: Date.now()-5,name:'張三',text:'我叫張三'}, { id: Date.now()-4,name:'李四',text:'我叫李四'}, { id: Date.now()-3,name:'王五',text:'我叫王五'} ] }, mounted:function(){ var l=JSON.parse(localStorage.getItem('cnm')||'[]') this.list=l; }, methods:{ go:function () { var now= {id:Date.now(),name:this.name,text:this.text} var list=JSON.parse((localStorage.getItem('cnm') || '[]')) list.unshift(now) localStorage.setItem('cnm',JSON.stringify(list)) this.list.unshift(now) this.text=this.name='' } } }) </script>