vue checkbox的應用

<template>
    <div>
        <input type="text" v-model='message'></input>
        <button v-on:click="addMessage()">增加+</button>
        <hr/>
        進行中
        <div>
            <ul>
                <li v-for="(item, key) in list" v-if="!item.checked">
                    <input type="checkbox" v-model="item.checked"></input>
                    {{ key }} ---- {{ item.title }} <button @click="deleteMessage(key)">刪除</button>
                </li>
            </ul>
        </div>
        <hr/>
        已完成
        <div>
            <ul>
                <li v-for="(item, key) in list" v-if="item.checked">
                    <input type="checkbox" v-model="item.checked"></input>
                    {{ key }} ---- {{ item.title }} <button @click="deleteMessage(key)">刪除</button>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            message:'',
            list:[]
        }
    },methods:{
        addMessage(){
            
            this.list.push({
                title:this.message,
                checked:false
            }) 
            console.log(this.list)
            this.message = ''
        },
        deleteMessage(key){
            this.list.splice(key,1)
        }
    }
}
</script>