<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡动画</title>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" v-model="todo" @keyup.enter="add">
            <button @click="add">添加新计划</button>
        </div>
        <ul>
            <li v-for="(item,index) in list" :key="item.id">
                <input type="checkbox" :checked="item.done" :id="'todo-' + item.id" @click="check($event,item)">
                <label :for="'todo-'+item.id" :class="{'done':item.done}">{{item.todo}}</label>
            </li>
        </ul>
    </div>

    <script src="../js/vue.js"></script>

    <script>

        let vm = new Vue({
            el:'#app',
            data:{
                todo:'',
                list:[
                    {
                        id:1,
                        todo:'健身',
                        done:false
                    },
                    {
                        id:2,
                        todo:'吃饭',
                        done: true
                    },
                    {
                        id:3,
                        todo:'存钱',
                        done:false
                    },
                    {
                        id:4,
                        todo:'购物',
                        done:false
                    }
                ]
            },
            methods:{
                add(){
                    if(!this.todo) return;
                    this.list.push({
                        id:this.list.length + 1,
                        todo:this.todo,
                        done:false,
                    });
                    this.todo = '';
                },
                check(event,item){
                   item.done = event.target.checked;
                   console.log(item)
                }
            }
        });
    </script>

    <style type="text/css">
        ul{
            list-style-type: none;
            padding: 0;
        }

        ul input,ul label{
            cursor: pointer;
        }

        .done{
            text-decoration: line-through;
            color: #999999;
        }
    </style>
</body>
</html>