todolist任务管理:js跟vue的区别

---

javascrpt

<div class="main">
			<div class="header">
				<div class="logo">LcTodo</div>
				<input type="text" id="input" placeholder="请输入待办事项" />
			</div>
			<div class="doing todo">
				<h3><span class="title">正在进行</span><span class="num">0</span></h3>
				<div class="list">
					<!-- <div class="todoItem">
						<input type="checkbox">
						<div class="content">今晚吃夜宵</div>
						<div class="del">删除</div>
					</div> -->
				</div>
			</div>
			<div class="done todo">
				<h3><span class="title">正在进行</span><span class="num">0</span></h3>
				<div class="list">
					<!-- <div class="todoItem">
						<input type="checkbox" checked="checked">
						<div class="content">今晚吃夜宵</div>
						<div class="del">删除</div>
					</div> -->
				</div>
			</div>
		</div>

1、获取input框输入的内容


2、将任务放进列表上

	function render(todoList){
				//将对象转为json格式的字符串
				localStorage.todoList = JSON.stringify(todoList);
				//每一次渲染之前,清空内容，,后面再把数组todolist全部渲染在页面上
				//不清除的话会把之前的数据渲染在页面上
				doingListDiv.innerHTML = ""
				doneListDiv.innerHTML = ""
				todoList.forEach(function(item,index){
					var todoItem = document.createElement("div")
					todoItem.className = "todoItem";
					if(item.isDone){
						todoItem.innerHTML = `
						<input type="checkbox" checked="checked" data-index="${index}">
						<div class="content">`+item.content+`</div>
						<div class="del" data-index="${index}">删除</div>`
						doneListDiv.appendChild(todoItem)
					}else{
						todoItem.innerHTML = `
						<input type="checkbox" data-index="${index}">
						<div class="content">`+item.content+`</div>
						<div class="del" data-index="${index}">删除</div>`
						doingListDiv.appendChild(todoItem)
					}
				})
			}

在触发回车键触发函数

render(todoList)

3、利用索引值操作属性

添加onchange事件利用index值改变isDone值

doingListDiv.onchange = function(e){
				//console.log(e)
				//通过事件对象找到dom对象,获取索引值
				var index = parseInt(e.target.dataset.index);
				//console.log(index)
				todoList1[index].isDone = true;
				render(todoList1)
			}
			doneListDiv.onchange = function(e){
				//console.log(e)
				//通过事件对象找到dom对象,获取索引值
				var index = parseInt(e.target.dataset.index);
				//console.log(index)
				todoList1[index].isDone = false;
				render(todoList1)
			}

4、删除按钮

//id为main点击事件
mainDiv.onclick = function(e){
				// 判断class值是否是del
				if(e.target.className=="del"){
					console.log(e)
					// 找到索引值
					var index = parseInt(e.target.dataset.index);
					//删除
					todoList1.splice(index,1);
					//重新渲染
					render(todoList1)
				}
				
			}

5、存储数据

//判断本地存储是否为空，是的话创建是的数组，不是的话冲本地存储拿到数据
			if(localStorage.todoList1==undefined){
				var todoList1 = []
			}else{
				// 将json格式的字符串转为对象
				var todoList1 = JSON.parse(localStorage.todoList1) 
			}

//在渲染前存储本地数据
function render(todoList){
				//将对象转为json格式的字符串
				localStorage.todoList = JSON.stringify(todoList);
				}

然后再渲染一下，重新打开页面也能看到之前的数据了

render(todoList)

5、修改pc端布局

//style.css
.pc{
	font-size: 200px !important;
	
}
/* pc端布局 */
.pc .main{
	margin:  0 auto;
}

vue

<div id="app">
			<div class="main">
				<div class="header">
					<div class="logo">LcTodo</div>
					<!-- 绑定回车事件,v-model绑定输入框的value值 -->
					<input type="text" v-model="inputValue" id="input" @keydown.enter="enterEvent" placeholder="请输入待办事项" />
				</div>
				<div class="doing todo">
					<h3><span class="title">正在进行</span><span class="num">0</span></h3>
					<div class="list">
						<transition-group name="slide" mode="out-in" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
						<div class="todoItem" v-for="item,index in doingList" :key="'doing'+index">
							<input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox">
							<div class="content">{{item.content}}</div>
							<div class="del" @click="deleteItem(item.id)">删除</div>
						</div>
						</transition-group>
					</div>
				</div>
				<div class="done todo">
					<h3><span class="title">正在进行</span><span class="num">0</span></h3>
					<div class="list">
						<transition-group name="slide" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight">
						<div class="todoItem" v-for="item,index in doneList" :key="'done'+index">
							<input @click.prevent="checkDone(item.id)" :data-id="item.id" type="checkbox" checked="checked">
							<div class="content">{{item.content}}</div>
							<div class="del" @click="deleteItem(item.id)">删除</div>
						</div>
						</transition-group>
					</div>
				</div>
				<div>doingList:{{doingList}}</div>
				<br /><br />
				<div>todoList:{{todoList}}</div>
			</div>
		</div>

1、通过点击事件获取todolist数组数据

enterEvent:function(event){
						console.log(event)
						//将数据添加至todolist
						this.todoList.push({
							content:this.inputValue,
							isDone:false,
							id:this.todoList.length
						})
						console.log(this.todoList.length)
						
						//保存
						this.saveData()
						//清除输入框的值
						this.inputValue = "";
					},

2、过滤表isDone是true的数组，或者是false。然后在div查看

				<div>doingList:{{doingList}}</div>
				<br /><br />
				<div>todoList:{{todoList}}</div>


				doingList:function(){

						//let arr = 需要过滤的数组.filter(方法/条件)
						let arr = this.todoList.filter(function(item,index){
							// !:反
							return !item.isDone
						})
						return arr;
					},
					//通过过滤todolist数据未做好的列表
					

					doneList:function(){
						let arr = this.todoList.filter(function(item,index){
							return item.isDone

						})
						return arr;

					},

4、点击事件添加tidolist和添加id

				enterEvent:function(event){
						console.log(event)
						//将数据添加至todolist
						this.todoList.push({
							content:this.inputValue,
							isDone:false,
							id:this.todoList.length
						})
						console.log(this.todoList.length)
						
						//保存
						this.saveData()
						//清除输入框的值
						this.inputValue = "";
					},

5、保存在本地存储

					saveData:function(){
						localStorage.todoList = JSON.stringify(this.todoList)
					},

6、在挂载之后保存数组

// 挂载之后,页面渲染完后
			mounted:function(){
					// 获取本地存储的数据保存
					this.todoList = localStorage.todoList?JSON.parse(localStorage.todoList):[];
				}