vue2 to do list

该代码示例展示了如何用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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值