vue实现一个任务计划表

最新推荐文章于 2024-10-07 16:46:39 发布

云之前端

最新推荐文章于 2024-10-07 16:46:39 发布

阅读量3k

点赞数 3

分类专栏： vue 学习总结

本文链接：https://blog.csdn.net/qq_44586361/article/details/90740664

版权

学习总结同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

效果图如下所示：
在这里插入图片描述
需要用到的指令：
条件渲染 v-show
根据表达式之真假值，切换元素的 display CSS 属性
当条件变化时该指令触发过渡效果

v-model
在表单控件或者组件上创建双向绑定

v-bind
缩写:
动态地绑定一个或多个特性，或一个组件 prop 到表达式

v-on
缩写@
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性： v-on:click=“handle(‘ok’, $event)”

v-for
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名

html代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
<link rel="stylesheet" type="text/css" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="page-top">
	<div class="page-content">
		<h3>任务计划列表</h3>
	</div>
</div>
<div class="main">
	<h3 class="big-title">添加任务：</h3>
	<input 
	placeholder="列如：vue学习计划：      提示：+回车即可添加任务" 
	class="task-input" 
	type="text"
	v-model="todo"
	v-on:keyup.13="addTodo"
	>
	<ul class="task-count" v-show="list.length">
		<li>1个任务未完成</li>
		<li class="action">
			<a class="action" href="#">所有任务</a>
			<a href="#">未完成的任务</a>
			<a href="#">完成的任务</a>
		</li>
	</ul>
	<h3 class="big-title">任务列表：</h3>
	<div class="tasks">
		<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
		<ul class="todo-list" >
			<li class="todo" :class="{completed:item.isChecked}" v-for="item in list">
				<div class="view">
					<input class="toggle" type="checkbox" v-model="item.isChecked">
					<label>{{item.title}}</label>
					<button class="destroy" @click="deleteTodo(item)"></button>
				</div>
				<input class="edit" type="text">
			</li>

		</ul>
	</div>
</div>
<script src="app.js"></script>
<script>
	
</script>
</body>
</html>

js代码

var list=[
{
	title:'学习vue',
	isChecked:false
},
{
	title:'学习vue',
	isChecked:true
}
]

new Vue({
	el:".main",
	data:{
		list:list,
		todo:''
	},
	methods:{
		addTodo(){
			
				this.list.push({
					title:this.todo,
					isChecked:false
				});
			this.todo='';
		},
		deleteTodo(todo){
			var index=this.list.indexOf(todo);
			this.list.splice(index,1)
		}

	}
});

由于内容太多，css部分就暂时先不上传，需要的朋友可以在下方留言，我会把css代码发给你的哦！