vue2 to do list_vue2to-优快云博客

本文链接：https://blog.youkuaiyun.com/promise466/article/details/128986189

该代码示例展示了如何用Vue.js创建一个简单的待办事项应用。用户可以在输入框中添加任务，按回车键将任务保存到列表中。任务被分为已完成和未完成两类，可通过计算属性过滤。此外，提供了删除任务的功能，点击每个任务旁边的x按钮会弹出确认对话框，确认后删除相应任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" @keyup.enter="addItem">
			<!-- 遍历数据list -->
			<div class="un">
            	<h3>未完成{{undolist.length}}</h3>
            	<div v-for="item in undolist" :key="item.id">
                <input type="checkbox" v-model="item.done">
                <span>{{item.title}}</span>
                <button @click="delItem(item)">x</button>
            	</div>
        	</div>
        <div class="do">
            <h3>已经完成{{donelist.length}}</h3>
            <div v-for="item in donelist" :key="item.id">
                <input type="checkbox" v-model="item.done">
                <span>{{item.title}}</span>
                <button @click="delItem(item)">x</button>
            </div>
        </div>
		</div>
		<script>
			new Vue({
				el:"#app",
				computed:{
					// 通过计算list算出undolist没有完成的列表
					undolist(){
						// 通过list过滤 返回item.done值为false的所有元素
						return this.list.filter(item=>!item.done);
					},
					donelist(){
						// 返回保留item.done值为true的元素
						return this.list.filter(item=>item.done);
					}
				},
				methods:{
					// 删除元素
					delItem(item){
					if (confirm("确定要删除我么？")) {
						// 查找item在list的下标
						var ind = this.list.indexOf(item);
						// 进行删除
						this.list.splice(ind,1);
						}
					},
					// 添加元素
					addItem(e){
						// e.target输入的文本框
						// e.target.value 文本框的值
						this.list.push(
						{
						done:false,
						title:e.target.value,
						id: this.list.length === 0 ? 1 : this.list[this.list.length - 1].id + 1
						}
						)
						// 清空文本框的内容
						e.target.value = "";
					}
				},
				data(){
					return {
						 list:[
						// 	{done:true,title:"学习html"}
						 ]
					}
				}
			})
			// 目标：1 在文本框输入文字，按回车，文字添加到list里面
			// 目标：2 单击x 删除当前行
			// unshift在数组的前面添加一个元素
			// splice（n，m，j） 从第n个删除m个，添加j
			// indexOf(item) 查找item在列表的下标
		</script>
		 
	</body>
</html>