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

实现todolist功能，具体实现如下：

可以实现对list添加、移除以及状态转变，其中添加功能既可以通过鼠标点击按钮实现，也可以通过回车键按下实现，通过使用v-model对checked的值进行双向绑定来完成状态的改变。在本次实际操作中仍存在一个小问题就是methods中函数调用，在完成数据存储前可以通过this.$options.methods.addfun();进行调用。

<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>

封装操作localstorage本地存储方法

总结

以上所述是小编给大家介绍的vue实现todolist基本功能以及数据存储功能，希望对大家有所帮助