今天連假第三天~來做點稍微複雜的todo list吧!
附上html(css就自己來吧~)

<div x-data="todos()">
    <div>
        <input type="text" x-model="todoTitle" @keydown.enter="addTodo()">
    </div>

    <ul>
        <template x-for="todo in todos" :key="todo.id">
            <li>

                <div class="cl_inlineBlock" :class="{'line-through' : todo.isComplete}">
                    <input type="checkbox" x-model="todo.isComplete">
                    <div class="cl_inlineBlock" x-text="todo.title"></div>
                </div>
                <button @click="deleteTodo(todo.id)">&times</button>


            </li>
        </template>
    </ul>

</div>

跟昨天很類似讓for迴圈去列出陣列裡的資料，
比較不一樣的是裡面又加了function去增加和刪除當下的todo項目(來看看js)

附上js

<script>
    function todos() {
        return {
            todos: [
                {
                    id: 1,
                    title: 'aaa',
                    isComplete: false,
                }
            ],
            todoTitle: '',
            todoId: 2,
            addTodo() {
                if (this.todoTitle.trim() === '') {
                    return;
                }
                this.todos.push({
                    id: this.todoId,
                    title: this.todoTitle,
                    isComplete: false,
                })
                this.todoId++;
                this.todoTitle = '';

            },
            deleteTodo(id) {
                this.todos = this.todos.filter(todo => id !== todo.id);
            }

        }
    }
</script>

這function回傳回去至x-data，
裡面可以再包含要執行的function，
像是addTodo() {}和deleteTodo(id) {}，
在addTodo()將輸入的字串push至陣列中，
然後將每個項目附上id(重要)，
因為這樣在執行deleteTodo(id)的時候才不會點A刪B，
在刪除上用了filter，過濾不需要的id項目。