todo案例

<template>
    <div>
        <section class="todoapp">
	<header class="header">
		<h1>todos</h1>
		<input v-model="todoData" class="new-todo" placeholder="What needs to be done?" autofocus @keydown.enter="AddFn">
	</header>
    
	<section class="main">
		<input id="toggle-all" class="toggle-all" type="checkbox">
		<label for="toggle-all">Mark all as complete</label>
		<ul class="todo-list">
			<li class="completed" v-for="(item,index) in todoList" :key='index'>
				<div class="view" >
					<input class="toggle" type="checkbox" checked>
					<label>{{item.name}}</label>
					<button class="destroy" @click="delFn(item.id)"></button>
				</div>
				<input class="edit" value="Create a TodoMVC template">
			</li>
		</ul>
	</section>
    
	<footer class="footer">
		<span class="todo-count"><strong>0</strong> item left</span>
		<ul class="filters">
			<li>
				<a class="selected" href="#/">All</a>
			</li>
			<li>
				<a href="#/active">Active</a>
			</li>
			<li>
				<a href="#/completed">Completed</a>
			</li>
		</ul>
		<button class="clear-completed">Clear completed</button>
	</footer>
</section>
    </div>
</template>

<script>
export default {
    data () {
        return {
            todoData:'',
            todoList:JSON.parse(localStorage.getItem('todoList'))||[]
        }
    },
    methods: {
        // 薪资
        AddFn(){
            this.todoList.push({
              id:this.todoList.length+1,
              name : this.todoData,
              flag:false
            })
        },
        // 删除
        delFn(id){
            console.log(id);
            this.todoList=  this.todoList.filter(item=>{
                return item.id!==id
            })
            console.log(this.todoList,'this.todoList');
        }
    },
    watch:{
        todoList:{
            handler(newobj,oldobj){
                console.log(newobj,'newobj');
                console.log(oldobj,'oldobj');
                localStorage.setItem('todoList', JSON.stringify(newobj))

            },
            deep:true
            
        }
    }
}
</script>

<style>

</style>