Vue版todolist案例

碼小余の部落格發表於2020-09-25
Vue

Vue版todolist案例

todolist – 記錄你的待辦事項

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue版todolist案例</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            #app{
                width: 100vw;
                height: 100vh;
                background: #CDCDCD;
            }
            /* 頭部樣式 */
            header{
                height: 50px;
                background: rgba(47,47,47,0.98);
                line-height: 50px;
            }
            section{
                width: 80vw;
                margin: 0 auto;
            }
            label{
                float: left;
                color: #DDD;
                font-size: 24px;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            }
            section > input{
                height: 24px;
                width: 60%;
                float: right;
                margin-top: 15px;
                text-indent: 10px;
                border-radius: 5px;
                box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
                border: none;
            }
            /* 內容樣式 */
            h2{
                position: relative;
                margin: 20px 0;
            }
            .todocount{
                display: inline-block;
                position: absolute;
                right: 5px;
                top: 2px;
                height: 20px;
                padding: 0 5px;
                border-radius: 20px;
                line-height: 22px;
                background: #E6E6FA;
                color: #666;
                font-size: 14px;
                text-align: center;
            }
            ol{
                padding: 0;
                list-style: none;
            }
            ol li{
                height: 32px;
                line-height: 32px;
                background: #fff;
                position: relative;
                margin-bottom: 10px;
                padding: 0 45px;
                border-radius: 3px;
                border-left: 5px solid #629A9C;
                box-shadow: 0 1px 2px rgba(0,0,0,0.07);
            }
            li > input{
                position: absolute;
                top: 6px;
                left: 10px;
                width: 22px;
                height: 22px;
                cursor: pointer;
            }
            li > a{
                position: absolute;
                right: 5px;
                top: 2px;
                display: inline-block;
                background: #CCC;
                width: 25px;
                height: 25px;
                border-radius: 14px;
                border: 6px double #fff;
                line-height: 14px;
                text-align: center;
                color: #fff;
                font-weight: bold;
                font-size: 14px;
                cursor: pointer;
            }
            footer {
                text-align: center;
                color: #666;
            }
            footer > a{
                text-decoration: none;
                color: #999;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- 首部 -->
            <header>
                <section>
                    <label>ToDoList</label>
                    <!-- autocomplete="off" -- 禁用自動完成 -->
                    <input v-model="addTodo"  @keydown.enter="addTodoEvent" type="text" name="title" id="title" placeholder="新增ToDo" required="required" autocomplete="off" />
                </section>
            </header>
            <!-- 內容 -->
            <section>
                <!-- {{ todoings }}
{{ checkTodos }} -->

                <h2>
                    正在進行
                    <span class="todocount">{{ todoingsLength }}</span>
                </h2>
                <ol>
                    <li v-for="todoing,index in todoings" :key="index">
                        <!-- 將選中的任務依次新增到checkTodos陣列中 -->
                        <input @click="toDoEvent(index)" v-model="checkTodos" type="checkbox" name="todoing" :value="todoing" />
                        <p>{{ todoing }}</p>
                        <a @click="removeTodoEvent(index)" href="javascript:;" :data-id="index">-</a>
                    </li>
                </ol>
                <h2>
                    已經完成
                    <span class="todocount">{{ checkTodosLength }}</span>
                </h2>
                <ol>
                    <li v-for="checkTodo,index in checkTodos" :key="index">
                        <!-- 將選中的任務依次新增到todoings陣列中 -->
                        <input @click="DotoEvent(index)" v-model="todoings" type="checkbox" name="done" :value="checkTodo" disabled />
                        <p>{{ checkTodo }}</p>
                        <a @click="removeDotoEvent(index)" href="javascript:;" :data-id="index">-</a>
                    </li>
                </ol>
            </section>
            <!-- 底部 -->
            <footer>
                ©2020 Continue.Run
                <a href="">clear</a>
            </footer>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = new Vue({
                el: "#app",
                data: {
                    // 新增todo - 把輸入框的值和adTodo繫結在了一起，輸入框的值變了，addTodo就會改變
                    addTodo: "",
                    // 正在進行的任務陣列，由addTodo新增資料
                    todoings: ["用Vue完成todolist案例","第二條"],
                    checkTodos: [],
                    // 是否顯示正在進行的ToDo
                    showTodoing: true,
                    // 是否顯示已經完成的ToDo
                    showTodone: true
                },
                computed: {
                    // 返回正在進行(todoings)陣列的長度的計算函式
                    todoingsLength: function(){
                        return this.todoings.length;
                    },
                    // 返回已經完成(checkTodos)陣列的長度的計算函式
                    checkTodosLength: function(){
                        return this.checkTodos.length;
                    }
                },
                methods: {
                    addTodoEvent: function(){
                        console.log("新增ToDo");
                        // 在正在進行新增todo
                        this.todoings.push(this.addTodo)
                        // 新增完成之後清空輸入框的文字
                        this.addTodo = ""
                    },
                    removeTodoEvent: function(index){
                        // 把對應的索引傳過來
                        // 刪除正在進行(todoings)中的Todo
                        console.log(index);
                        console.log("刪除ToDo");
                        // 刪除todoings中的指定內容
                        this.todoings.splice(index,1)
                    },
                    removeDotoEvent: function(index){
                        // 把對應的索引傳過來
                        // 刪除正在進行(todoings)中的Todo
                        console.log(index);
                        console.log("刪除ToDo");
                        // 刪除todoings中的指定內容
                        this.checkTodos.splice(index,1)
                    },
                    toDoEvent: function(index){
                        // 從正在進行移到已經完成
                        // this.checkTodos.push(this.todoings[index])
                        // this.todoings.splice(index,1)		
                    },
                    DotoEvent: function(index){
                        // 從已經完成移到正在進行
                        // this.todoings.push(this.checkTodos[index])
                        // this.checkTodos.splice(index,1)
                    }
                },
            })
        </script>
    </body>
</html>

效果圖：

Vue版todolist案例

相關文章