1. 程式人生 > >vue製作清單應用todoList

vue製作清單應用todoList

該專案為練手專案,學習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>

效果圖: