Vue组件化实现 todolist

最新推荐文章于 2022-11-08 19:29:30 发布

秃头码农007

最新推荐文章于 2022-11-08 19:29:30 发布

阅读量189

点赞数 1

文章标签： javascript css vue

本文链接：https://blog.csdn.net/qq_52256892/article/details/121386656

版权

html部分

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link rel="stylesheet" type="text/css" href="css/todolist.css"/>
	</head>
	<body>
		<div id="app">
			<header>
				<form @submit.prevent='submit($event)'>
					<label for="inpTitle">ToDoList</label>
					<input type="text" id="inpTitle" placeholder="添加ToDo" required="required" />
				</form>
			</header>
		  <section>
		  	<ullist title="正在进行" :local="local" :num="todonum" :flag="todoflag" @dellist="delitem" @editdatalist="editdataitem(arguments)" @changedatalist="changedataitem"></ullist>
		  	<ullist title="已完成" :local="local" :num="donenum" :flag="doneflag" @dellist="delitem" @editdatalist="editdataitem(arguments)" @changedatalist="changedataitem"></ullist>
		  </section>
		  <footer>
		  	<p>Copyright &copy; 2014 todolist.cn <a @click="clearLocal()">clear</a></p>
		  </footer>
		</div>
		<template id="ullist">
			<div>
				<slot>
					<h2>{{title}}<span>{{num}}</span></h2>
					<ul>
						<li v-for="(item,index) in local" :key="index" v-if="item.todo===flag">
							<input type="checkbox" @change="changedata(index)" :checked="flag"/>
							<input type="text"  v-model="item.title" @blur="editdata($event,index)"/>
							<a @click="del(index)">-</a>
						</li>
					</ul>
				</slot>
			</div>
		</template>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
		<script>
			const ullist = {
				template:'#ullist',
				data(){
					return {
						
					}
				},
				props:{
					title:{
						type:String
					},
					local:{
						type:Array
					},
					flag:{
						type:Boolean,
						default:false
					},
					num:{
						type:Number,
						default:0
					}
				},
				methods:{
					del(index){
						this.$emit('dellist',index)
					},
					editdata(e,index){
						this.$emit('editdatalist',e,index)
					},
					changedata(index){
						this.$emit('changedatalist',index)
					}
				}
				
				
			}
		</script>
		<script src="js/todolist.js"></script>
	</body>
</html>

css部分

*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	cursor: pointer;
}
li{
	list-style: none;
}
body{
	background-color: #CDCDCD;
}
header{
	width: 100%;
	height: 50px;
	background-color: #323232;
}
header form{
	width: 620px;
	height: 50px;
	margin: 0 auto;
}
form label{
	color: #DDDDDD;
	font-size: 24px;
	line-height: 50px;
	cursor: pointer;
}
form input{
	width: 364px;
	height: 26px;
	outline: 0;
	padding-left: 10px;
	box-sizing: border-box;
	border-radius: 5px;
	background-color: #FFFFFF;
	float: right;
	margin-top: 12px;
	border: none;
	box-shadow: 0 1px 0 rgb(255 255 255 / 24%), 0 1px 6px rgb(0 0 0 / 45%) inset;
}
section{
	width: 620px;
	padding: 0px 10px;
	box-sizing: border-box;
	margin: 0 auto;
}
section h2{
	margin: 20px 0px;
}
section h2 span{
	display: inline-block;
	height: 20px;
	line-height: 20px;
	text-align: center;
	color: #666666;
	font-size: 14px;
	background-color: #E6E6FA;
	padding: 0px 5px;
	border-radius: 20px;
	float: right;
	margin-top: 6px;
}

section ul li{
	height: 32px;
	background-color: #FFFFFF;
	border-left: 5px solid #629A9C;
	line-height: 32px;
	margin-bottom: 10px;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgb(0 0 0 / 7%);
	padding: 0px 45px;
	position: relative;
}
section ul li p{
	margin: 0 auto;
	height: 32px;
}
section ul li>input:nth-of-type(1){
	width: 22px;
	height: 22px;
	position: absolute;
	top: 50%;
	left: 12px;
	margin-top: -11px;
}
section ul li>input:nth-of-type(2){
	width: 100%;
	height: 90%;
	box-sizing: border-box;
	border: none;
	font-size: 16px;
}
section ul li>input:nth-of-type(2):focus{
	outline: 1px solid #333333;
	padding-left: 5px;
}
section ul li a{
	display: block;
	width: 26px;
	height: 24px;
	line-height: 12px;
	text-align: center;
	box-sizing: border-box;
	border-radius: 14px;
	border: 6px double #FFF;
	background: #CCC;
	color: #FFFFFF;
	font-weight: 700;
	position: absolute;
	top: 50%;
	right: 12px;
	margin-top: -12px;
}

footer{
	color: #666666;
	font-size: 14px;
	text-align: center;
}
footer a{
	color: #999999;
}

js部分

const app = new Vue({
	el: '#app',
	data() {
		return {
			local:[],
			todoflag:false,
			doneflag:true,
			todonum:0,
			donenum:0
		}
	},
	components:{
		ullist
	},
	methods:{
		submit(e){
			console.log(e.target[0].value);
			let newtodo = {
				"title":e.target[0].value,
				"todo":false
			}
			e.target[0].value = ''
			//点击回车增加数据
			this.local.unshift(newtodo)
			//存储数据
			this.savedata()
			this.count()
		},
		//存储数据
		savedata() {
			window.localStorage.setItem('todo', JSON.stringify(this.local))
		},
		//删除数据
		delitem(index){
			//删除点击的某一项
			this.local.splice(index,1)
			//存储数据
			this.savedata()
			this.count()
		},
		//编辑数据
		editdataitem(e){
			console.log(e[0]);//代表点击某一项失焦事件
			console.log(e[1]);//索引
			var index = e[1]
			this.local[index].title = e[0].target.value
			//存储数据
			this.savedata()
		},
		//切换数据
		changedataitem(index){
			console.log(index);
			this.local[index].todo ? this.local[index].todo=false:this.local[index].todo=true,
			//存储数据
			this.savedata()
			this.count()
		},
		//数据个数
		count(){
			this.donenum = 0;
			this.todonum = 0;
			this.local.forEach((v,index)=>{
				v.todo?this.donenum++:this.todonum++
			})
		}
	},
	created() {
		let data = window.localStorage.getItem('todo')
		if(data!=null){
			console.log(JSON.parse(data));
			this.local = JSON.parse(data)
			this.count()
		}else {
			this.local = []
		}
	}
	
	
})

秃头码农007

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue组件化实现 todolist

html部分<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="css/todolist.css"/> </head> <body> <div id="app">
复制链接

扫一扫