vue实现todolist基本功能以及数据存储功能实例详解

<div id="app">       <input type="text" v-model="msg" @keydown="kaddFun($event)"/>       <button @click="addFun()">添加</button>       <br /><br />       <h3>进行中</h3>       <ul>         <li v-for="(item,key) in list" v-if="!item.checked"><input type="checkbox" v-model="item.checked" @change="saveList()"/> {{item.title}} <button @click="moveFun(key)">移除</button></li>       </ul>       <h3>已完成</h3>       <ul>         <li v-for="(item,key) in list" v-if="item.checked" ><input type="checkbox" v-model="item.checked"/> {{item.title}} <button @click="moveFun(key)">移除</button></li>       </ul>     </div>     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>     <script type="text/javascript">       var app = new Vue({         el:'#app',         data:{           msg:'',           list:[]         },         methods:{           addFun(){             this.list.push({               title:this.msg,               checked:false             }),             this.msg = '';             //存储数据            localStorage.setItem('list',JSON.stringify(this.list))           },           kaddFun(e){             if(e.keyCode==13){                this.addFun();             }             },           moveFun(key){             confirm("是否移除"+this.list[key].title+"?");             this.list.splice(key,1);             localStorage.setItem('list',JSON.stringify(this.list))           },           saveList(){             localStorage.setItem('list',JSON.stringify(this.list))           }         },         //生命周期函数  vue页面刷新就会触发的方法        mounted(){           //json字符串转成json对象          var list = JSON.parse(localStorage.getItem('list'))           //判断list是否存在          if(list){             //存在则将获取到的list保存刷新后的list中            this.list = list;           }         }       })     </script>