vue-11实战todo list 本地存储-自学视频教

Posted 2021-04-16 IT入门

  源代码  

<div id="app"> <h1>美好清单</h1> <div> <input type="text"  v-model="current"         @keyup.enter="addItem()">        </div> <div v-for="(item,index) in list" :key="item"> {{item}}  <button @click="delItem(index)">删除</button> </div></div><script>new Vue({ el:"#app", data:{ current:'',//当前输入框的文字 list:["学习vue","11前睡觉","打一场RPG游戏"] }, methods:{ // 单击删除按钮，删除一条列表 delItem(index){  this.list.splice(index,1); }, // 文本框按enter 添加一条 在列表最前面 addItem(){ this.list.unshift(this.current); this.current= ""; } }, // 当数据发生变化时候存list 到localstorage watch:{ list:{ handler:function(nval,oval){ localStorage.setItem("list",JSON.stringify(this.list)); }, deep:true } }, // 当vue加载成功时候 从localstorage 取出数据并且赋值给list created(){
 var str = localStorage.getItem("list")||"[]"; this.list = JSON.parse(str);
 }})</script>