ToDolist_todolist官网

官方网址http://www.todolist.cn/

具体功能

1.添加内容 删除内容

2.本地存储

3.点击更改

css部分

*{
				margin: 0;
				padding: 0;
			}
			.list {
				
				position: relative;
			}
			#app{
				width: 100%;
				height: 900px;
				background-color: #cdcdcd;
			}
			.h1 {
				width: 100%;
				height: 100px;
				line-height: 100px;
				background: #323232;
				margin: 0 auto;
			}
			.h1 span{
				color: #fff;
				margin-left: 550px;
			}
			.content{
				width: 600px;
				height: 500px;
				margin: 0 auto;
			}
			button{
				display: none;
			}
			.item:hover button{
				display: block;
			}
			.inp {
				width: 400px;
				height: 40px;
				position: absolute;
				top: 30px;
				left: 800px;
				border-radius: 5px;
			}
			
			
			h1{
				margin: 10px 0px;
			}
			.list>.item {
				width: 500px;
				height: 40px;
				border-radius: 5px;
				
				line-height: 40px;
				margin: 10px 0px;
				background-color: #fff;
			}
			.list>.item #ce {
				width: 10px;
				height: 40px;
				background-color: #629a9c;
				float: left;
				border-radius: 5px 0px 0px 5px;
			}
			.clear{
				margin-left: 360px;
			}
			.list>.item input {
				width: 20px;
				height: 20px;
				float: left;
				margin-top: 10px;
				margin-left: 10px;
			}
			.list>.item .inp2 {
				position: absolute;
				width: 200px;
				height: 30px;
				top: -8px;
			}
 
			.list>.item span {
				float: left;
				margin-left: 10px;
			}
 
			.list>.item button {
				width: 20px;
				height: 20px;
				line-height: 20px;
				float: right;
				margin-top: 10px;
				margin-right: 10px;
				border-radius: 50%;
			}

html部分

<div id="app">
			<h1 class="h1">
				<span>ToDolist</span></h1>
			<div class="content">
 
				<input class="inp" type="text" 
				placeholder="添加todo"
				v-model.trim="temp" 
				@keyup.enter="addItem()" />
 
				<h1>正在进行</h1>
				<div class="list" >
					<div class="item" v-for="item in dolist" :key="item.title">
						<div id="ce"></div>
						<input type="checkbox" v-model="item.done" />
						<span 
						@dblclick="editTemp=item.title;item.state=1"
						v-show="item.state==0">
						{{item.title}}</span>
						
						<input type="text" class="inp2"
						v-model="editTemp"
						 v-show="item.state==1"
						 @keyup.enter="item.title=editTemp;item.state=0;"
						 @blur="item.title=editTemp;item.state=0;"
						 @keyup.esc="item.state=0;editTemp=item.title;"
						 v-focus="item.state==1"
						 >
						<button type="button" @click="delItem(item)"></button>
					</div>
				</div>
				
				<h1>已经完成</h1>
				<div class="list">
					<div class="item" v-for="item in undolist" :key="item.title" style="opacity: .5;">
						<div id="ce"></div>
						<input type="checkbox" v-model="item.done" />
						<span @dblclick="editTemp=item.title;item.state=1"
						v-show="item.state==0">
						{{item.title}}</span>
						<input type="text" class="inp2"
						v-model="editTemp"
						 v-show="item.state==1"
						 @keyup.enter="item.title=editTemp;item.state=0;"
						 @blur="item.title=editTemp;item.state=0;"
						 @keyup.esc="item.state=0;editTemp=item.title;"
						 v-focus="item.state==1"
						 >
						<button type="button" @click="delItem(item)"></button>
						 
					</div>
				</div>
				<p>
					<span style="color: #00FFFF;" v-if="list.length!=0"><b>{{list.length}}</b> Strip data</span>
					<span v-show="list.length!=0" @click="clear" class="clear" style="cursor: pointer; color: #00FFFF;">clear</span>
				</p>
				
			</div>
 
 
		</div>

js部分

<script type="text/javascript">
			new Vue({
				el: "#app",
				watch:{
					"list":{
						handler(nval){
							localStorage.setItem("list",JSON.stringify(this.list))
						},
						deep:true
					}
					
				},
				computed:{
					dolist(){
						return this.list.filter(item=>!item.done);	
					},
					undolist(){
						return this.list.filter(item=>item.done);
					}
				},
				data:{
					//通过本地存储来存储数据
					list:JSON.parse(localStorage.getItem("list")||"[]"),
					temp:""	,
					editTemp:"",
				},
				methods:{
                    //添加
					addItem(){
						var item = {title:this.temp,done:false,state:0}
						this.list.unshift(item);
						this.temp = "";
					},
 
                    //删除
					delItem(item) {
						
						var ind = this.list.findIndex(value => value.title === item.title);
						this.list.splice(ind, 1);
					},
					clear:function(){
						this.list = []
					}
					
					
				},
				directives:{
					"focus":{
						update(el,binding){
							if(binding.value){el.focus()}
						}
					}
				}
 
			})
		</script>