vue製作清單應用todoList
阿新 • • 發佈：2018-12-11
該專案為練手專案，學習vue後根據自己的理解進行設計。該專案運用到了localStorage進行資料儲存，可長期儲存使用者資料。但是並沒有加入定時提醒和設定過期時間。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue製作清單應用todoList</title> <style> *{margin:0;padding: 0;} .header{background-color: #333;color: #fff;line-height: 84px;} .header span{display: inline-block;margin-left: 27px;} .header .inputArea{float: right;line-height: 84px;margin-right: 30px;} .header .inputArea input{height: 25px;width: 300px;} .header .inputArea a{text-decoration: none;color: #fff;padding: 15px;} .todo,.finishtodo{background-color: #f2f2f2;color:#333;} .todo h4{line-height: 30px;padding:15px;background: #FFEB3B} .finishtodo h4{line-height: 30px;padding:15px;background: #00bcd4} .todo li,.finishtodo li{line-height: 52px;font-size: 16px;cursor: pointer;} .todo li span,.finishtodo li span{width: 92px;display: inline-block;text-align: center;} .finishtodo li{color: #9e9e9e;} .todo li a,.finishtodo li a{float: right;text-decoration: none;margin-right: 40px;} </style> </head> <body> <div id="app"> <div class="header"> <span><h1>todoList</h1></span> <div class="inputArea"> <input type="text" placeholder="請輸入代辦事項" v-model="inputValue" @keyup.enter="on_submit"> <a href="javascript:;" @click="on_submit">提交</a> </div> </div> <div class="todo"> <h4>待辦事項</h4> <ul> <!-- 加入track-by以序列為索引，是的v-for可以列出重複的資料 --> <!-- 這裡track-by可以直接寫index不需要$,寫$index是我的習慣 --> <!-- 注意vue1.0和2.0 v-for引數順序的問題 --> <li v-for="(item,index) in todoList" track-by="$index" @click="finishToDo(index)" title="點選加入已完成事項"> <span>{{index+1}}</span>{{item}} <a href="javascript:;" @click.stop="deleteToDo(index)">刪除</a> </li> </ul> </div> <div class="finishtodo"> <h4>已完成事項</h4> <ul> <li v-for="(item,index) in finishList" track-by="$index"> <span>{{index+1}}</span>{{item}} <a href="javascript:;" @click.stop="deleteFinish(index)">刪除</a> </li> </ul> </div> </div> <script src="../vue221.js"></script> <script> var todo = JSON.parse(localStorage.getItem('todo')); var finish = JSON.parse(localStorage.getItem('finish')); if(!todo){ todo = []; } else if(!finish){ finish = []; } new Vue({ el:"#app", data:{ todoList : todo, finishList : finish, inputValue : '', }, methods:{ on_submit:function(){ if(this.inputValue!=''){ this.todoList.push(this.inputValue); this.inputValue = ''; this.saveData(); }else{ alert("請輸入代辦事項"); } }, finishToDo:function(index){ this.finishList.push(this.todoList[index]); this.todoList.splice(index,1); this.saveData(); }, deleteToDo:function(index){ this.todoList.splice(index,1); this.saveData(); }, deleteFinish:function(index){ this.finishList.splice(index,1); this.saveData(); }, saveData:function(){ localStorage.setItem('todo',JSON.stringify(this.todoList)); localStorage.setItem('finish',JSON.stringify(this.finishList)); } } }); </script> </body> </html>
效果圖：
