Vue实现简单ToDolist案例

Vue实现简单ToDolist案例

<template>
	<div>
		
		<div>
			
			<input type="text" v-model="inputValue" @keydown.enter="add">
			
			<span @click="shaix" style="cursor: pointer;">筛选</span>
			
			<h3>正在进行({
   {
   noList}})</h3>
			<div>
				<div v-for="(item,index) in list" v-show="!item.isSuc">
					<input type="checkbox" @click.prevent="handleNo(item)">
					
					<span class="todo-sp1" 
							v-show="updateIndex!=index" 
							@dblclick="update(item,index)">
							{
   {
   item.title}}
					</span>
					
					<input type="text" v-show="updateIndex==index"
							v-model="item.title"
							@keydown.enter="updateSave"
							@keydown.esc="updateBack(item)"
							@blur="updateSave">
					
					<button @click="del(index)">删除</button>
				</div>
			</div>
			
			
			<h3>已经完成({
   {
   yesList}})</h3>
			<div>
				<div v-for="(item,index) in list" v-show="item.isSuc">
					<input type="checkbox" checked @click.prevent="handleYes(item)">
					
					<span class="todo-sp1" 
							v-show="updateIndex!=index" 
							@dblclick="update(item,index)">
							{
   {
   item.title