vue小项目练习——输入标题并将输入的标题添加到标题列表

最新推荐文章于 2023-02-27 09:00:00 发布

tall羊

最新推荐文章于 2023-02-27 09:00:00 发布

阅读量559

点赞数

分类专栏： vue 文章标签： vue 添加列表

本文链接：https://blog.csdn.net/qq_34448522/article/details/84636773

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

第一次写博客，先自我介绍一下吧，我是18届中国石油大学（华东）计算机科学与技术专业的本科毕业生[有没有学长或者学姐，吱吱吱]，现从事前端工作。希望通过这个博客记录自己的学习之路，加油！
今天没有开发任务，自学了一下vue，做了个小练习。
在这里插入图片描述之前只是简单看了一下vue的模板语法，今天的小实例让我学习不少。上代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css">
	</head>
	<body>
		<section id="app">
			<div class="title">
				<span>Panel title</span>
			</div>
			<div class="search">
			<input type="text"  placeholder="search for..." v-model="item.title"/>
			<a href="#" v-on:click="addItem"/></a>
			</div>
			<hr>
			<div class="list">
				<div class="list_item" v-for="(vars,index) in todolist">
					<span v-bind:class={green:vars.ok} v-on:click='hasgreen(index)'class="gx"></span>
					<span>{{vars.title}}</span>
					<span class="gx" v-on:click='del(index)'></span>
				</div>
			</div>
		</section>
	</body>
	<script>
		var vm=new Vue({
		 el:'#app',
		 data:{
		 	todolist:[
		 	
		 	],
		 	item:{
		 		title:'',
		 		ok:false
		 	}
		 },
		 methods:{
		 	addItem:function(){
		 		var obj=Object.assign({},this.item);
		 		this.todolist.push(obj);
		 		this.item.title='';
		 	},
		 	hasgreen:function(index){
		 		if(this.todolist[index].ok==true)
		 		{
		 			this.todolist[index].ok=false;
		 			return;
		 		}
		 		if(this.todolist[index].ok==false){
		 			this.todolist[index].ok=true;
		 			return;		 			
		 		}
		 		
		 	},
		 	del:function(index){
		 		if(this.todolist[index].ok==true){
		 			this.todolist.splice(index,1);
		 			return;
		 		}
		 		else{
		 			alert('请先勾选您要删除的title');
		 		}
		 		
		 	}
		 }
		 
		}
		)
	</script>
</html>

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html,body{
	width: 100%;
	height: 100%;
}
html{
	font-size: 20px;
}
section{
	width: 60%;
	margin: 3rem auto;
	border-radius: 5px;
	border: 1px solid lightskyblue;
}
.title{
	width: 100%;
	height: 2rem;
	border-radius: inherit;
	line-height: 2rem;
	background-color:lightblue ;
	border-bottom:1px solid lightskyblue ;
}
.title span{
	margin-left: 0.5rem;
}
.search{
	width: 90%;
	margin: 1rem auto;
	height: 2rem;
	border:1px solid gainsboro ;
	border-radius: 5px;
	display: flex;
	align-items: center;
}
.search input{
	width: 90%;
	border: none;
	font-size: 0.8rem;
	margin-left: 1rem;
	outline: none;
}
.search a{
	height: 100%;
	width: 5%;
	display: block;
	background: url(../img/tj.png) no-repeat right;
	background-size: 20px 20px;
}
hr{
	display: block;
	height: 1px;
	border: none;
	background-color: gainsboro;
	width: 90%;
	margin: auto;
}
.list{
	width:90%;
	margin: 0.5rem auto;
}
.list_item{
	border: 1px solid gainsboro;
	border-radius: 5px;
	height: 2rem;
	display: flex;
	align-items: center;
	margin-top: 1rem;
}
.gx{
	display: block;
	margin: 0.5rem;
	width: 1rem;
	height: 1rem;
	background: url(../img/gx_n.png) no-repeat;
    background-size: contain;
}
.green{
	    background: url(../img/gx_y.png) no-repeat;
		background-size: contain;
}
.list_item span:nth-child(3){
	background: url(../img/del.png) no-repeat;
	background-size: contain;	
}
.list_item span:nth-child(2){
	width: 85%;
	margin-left: 0.5rem;
	font-size: 0.8rem;
}

【总结】1.没有使用bootstrap框架。个人不喜欢框架，更喜欢自己写，不知道为什么。这也是很大的困惑，总觉得用框架很拘束，自己写更灵活，修改也方便。请教过一个前端人员，他说框架是给后端人员快速开发用的，前端人员建议自己写。希望有开发经验的人能发表一下看法。
2.对用vue写列表有了大致的了解，也学习了绑定事件、添加class等。
刚毕业，在公司也没有人带，如果有代码不合理的或者可以优化的，或者有错误，希望能指出，一起进步一起学习，谢谢啦~