Vue简单TODOlist_pengda9512-CSDN博客

本文链接：https://blog.csdn.net/pengpeng9512/article/details/101077560

Vue 实现简单TodoList

不说废话直接上代码。。。。

不说废话直接上代码。。。。

第一次发博客，各位大牛、大佬们不喜勿喷，个人记录，BUG肯定是有，主要面向于初学者  。。。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 1000%;
			}
			#app {
				width: 100%;
				height: 1000%;
				background: ghostwhite;
				box-sizing: border-box;
				margin: 20px auto;
			}

			.headp {
				width: 100%;
				height: 80px;
				padding-left: 20%;
				line-height: 80px;
				background: #FF0000;
				color: white;
				margin-bottom: 30px;
				font-size: 22px;
			}

			.one-ipt {
				margin-left: 20%;
				width: 50%;
				height: 30px;
				margin-bottom: 50px;
				padding: 0 10px;
			}

			.one-ul {
				width: 50.5%;
				height: auto;
				list-style: none;
				margin-left: 20%;
				background: white;
				padding: 10px;
				padding-bottom: 0px;
			}

			.one-ul>li {
				border-bottom: 1px solid gainsboro;
				width: 94%;
				height: 40px;
				line-height: 40px;
				display: flex;
				padding: 0 10px;
				margin-bottom: 30px;
			}

			.text-span {
				margin-left: 20px;
				width: 85%;
				height: 100%;
			}

			.xiu-span {
				margin-left: 20px;
				width: 85%;
				height: 100%;
			}

			.xiu-ipt {
				width: 85%;
				height: 20px;
			}
			.state-box{
				width: 95%;
				height: 40px;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				justify-content: space-between;
				padding:0 20%;
			}
			.state-ul{
				width: 40%;
				height: 100%;
				list-style: none;
				display: flex;
			}
			.state-ul li{
				width: 33.3%;
				height: 100%;
				font-size: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.state-li{
				border:1px solid gray;
			}
		</style>
	</head>
	<body>
		<div id="app">

			<p class="headp">任务计划</p>
			
			<input type="text" placeholder="吃饭睡觉打豆豆" v-model="txt" @keydown.enter="add()" class="one-ipt" />
			<div class="state-box">
				<p style="color: #FF0000;">共有{{arr.length}}个任务</p>
				<ul class="state-ul" >
					<li v-for="(v,i) in statelist" @click="clss(i)" :class="{'state-li':stateclass == i}"> {{v.txt}}</li>
				</ul>
			</div>
			
			<br>
			<p style="margin-left: 20%;margin-bottom: 20px;" v-show="fl">还有{{wc?arr.length:nos}}项任务未完成</p>
			<ul class="one-ul" v-show="fl">
				<span>未完成 ：</span>
				<br>
				<br>
				<li style="color: #FF0000;" v-show="!arr.length">还没有添加任何任务.......</li>

				<li v-for="(v,i) in arr" v-if="!v.ichecked" @mouseover="show(i)" @mouseout="hied(i)">

					<span><input type="checkbox" name="chek" @click="chek($event,i)" /></span>

					<span @dblclick="xiu(i)" v-if="v.flag" class="text-span">{{v.txt}}</span>

					<span class="xiu-span"><input type="text" v-if="!v.flag" v-model="xiutxt" @keydown.enter="add2(i)" class="xiu-ipt" /></span>

					<span class="del-span"><button @click="del(i)" class="del-ipt" style="background: none;border: none;" v-show="v.show">X</button></span>
				</li>
			</ul>
			
			<p style="margin-left: 20%;margin-bottom: 20px;" v-show="fl1">已完成{{oks}}项任务</p>
			<ul class="one-ul" v-show="fl1">
				<span>以完成 ：</span>
				<br>
				<br>
				<li style="color: #FF0000;" v-show="!arr.length">还没有完成任何任务.......</li>
				<li v-for="(v,i) in arr" v-if="v.ichecked" @mouseover="show(i)" @mouseout="hied(i)">

					<span><input type="checkbox" name="chek" checked="checked" @click="chek($event,i)" /></span>

					<span @dblclick="xiu(i)" v-if="v.flag" class="text-span"><del>{{v.txt}}</del></span>

					<span class="del-span"><button @click="del(i)" class="del-ipt" style="background: none;border: none;" v-show="v.show">X</button></span>
				</li>
			</ul>

		</div>

	</body>
	<script type="text/javascript">
		const vm = new Vue({
			el: "#app",
			data: {
				txt: "", 			//获取数据的输入框的值
				xiutxt: "",			//修改框的数据的值
				arr: [],			//用来存数据的数组
				wc: true,			//用来判断已完成显示的数值  ---120行
				oks: 0,				//用来存储已完成的数量
				nos: 0,				//用来存储未完成的数量
				stateclass:0,		//用来通过下标更改class
				statelist:[
					{txt:"所有任务",ishow:true},
					{txt:"未完成的项目",ishow:false},
					{txt:"已完成的项目",ishow:false}
					],
				fl:true,
				fl1:true
			},
			methods: {
				add() {
					if (this.txt == "") {
						alert("数据不能为空")
					} else {
						this.arr.push({
							txt: this.txt,
							flag: true,
							show: false,
							ichecked: false
						})
						this.txt = ""
					}
				},
				del(i) {
					this.arr.splice(i, 1)
					let num = 0;
					let num1 = 0;
					for (let i = 0; i < this.arr.length; i++) {
						if (this.arr[i].ichecked) {
							num++
						}
						if (!this.arr[i].ichecked) {
							num1++
						}
					}
					this.wc = false
					this.oks = num
					this.nos = num1
				},
				xiu(i) {
					console.log(i)
					this.arr[i].flag = !this.arr[i].flag
				},
				add2(i) {
					this.arr[i].flag = !this.arr[i].flag
					if (this.xiutxt == "") {
						this.arr.splice(i, 1)
					} else {
						this.arr[i].txt = this.xiutxt
					}
				},
				
				show(i) {
					this.arr[i].show = true
				},
				hied(i) {
					this.arr[i].show = false
				},
				chek(ev, i) {
					let a = ev.target.checked
					this.arr[i].ichecked = a
					let num = 0;
					let num1 = 0;
					for (let i = 0; i < this.arr.length; i++) {
						if (this.arr[i].ichecked) {
							num++
						}
						if (!this.arr[i].ichecked) {
							num1++
						}
					}
					this.wc = false
					this.oks = num
					this.nos = num1
					console.log(a)
					console.log(num, num1)
				},
				clss(i){
					this.stateclass = i
					if(i == 0){
						this.fl = true
						this.fl1 = true
					}
					if(i==1){
						this.fl1 = false
						this.fl = true
					}
					if(i==2){
						this.fl1 = true
						this.fl = false
					}
				}
				
			}
		})
		
		
	</script>
</html>