快捷導(dǎo)航

vue實現(xiàn)todolist基本功能以及數(shù)據(jù)存儲功能實例詳解

更新時間：2019年04月11日 11:04:03 作者：一條魚i

本文通過實例代碼給大家介紹了vue實現(xiàn)todolist基本功能以及數(shù)據(jù)存儲功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

實現(xiàn)todolist功能，具體實現(xiàn)如下：

可以實現(xiàn)對list添加、移除以及狀態(tài)轉(zhuǎn)變，其中添加功能既可以通過鼠標(biāo)點擊按鈕實現(xiàn)，也可以通過回車鍵按下實現(xiàn)，通過使用v-model對checked的值進行雙向綁定來完成狀態(tài)的改變。在本次實際操作中仍存在一個小問題就是methods中函數(shù)調(diào)用，在完成數(shù)據(jù)存儲前可以通過this.$options.methods.addFun();進行調(diào)用。

<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 = '';
             //存儲數(shù)據(jù)
            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))
           }
         },
         //生命周期函數(shù)  vue頁面刷新就會觸發(fā)的方法
        mounted(){
           //json字符串轉(zhuǎn)成json對象
          var list = JSON.parse(localStorage.getItem('list'))
           //判斷l(xiāng)ist是否存在
          if(list){
             //存在則將獲取到的list保存刷新后的list中
            this.list = list;
           }
         }
       })
     </script>

封裝操作localstorage本地存儲方法

總結(jié)

以上所述是小編給大家介紹的vue實現(xiàn)todolist基本功能以及數(shù)據(jù)存儲功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: