【IMWeb训练营作业】使用 Vue 实现一个 TODO List

最新推荐文章于 2022-11-13 16:36:41 发布

immatt2015

最新推荐文章于 2022-11-13 16:36:41 发布

阅读量287

点赞数

分类专栏：前端 vue2 文章标签： vue2 todolist IMWeb训练营作业

本文链接：https://blog.csdn.net/immatt2015/article/details/70245993

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

初学 Vue, 只是实现了基本todo list 的功能.

具体的文件 https://github.com/immatt2015/vue-demo/blob/master/todolist.html

关键代码:

<body>
	<div id="container">
		<h4>添加任务:</h4>
		<input type="text" placeholder="Add Todo" id="addTodo" v-model="todo" v-on:keyup.enter="addTodo">

		<div>
			<span class="statistics">共有{{undoneLen}}条未完成任务</span>
			<button class="show-tab" @click="changeShow('')">全部</button>
			<button class="show-tab" @click="changeShow(true)">已完成</button>
			<button class="show-tab" @click="changeShow(false)">未完成</button>
			
		</div>

		<h4>任务列表:</h4>
		<ul class="todos">
			<li v-for="(todo, index) in todos" v-if="show === '' || show === todo.isDone">
				<label class="check-symbol" v-bind:class="{checked: todo.isDone}">
					 <input type="checkbox" v-model="todo.isDone">
				</label>
				<span v-bind:class="{completed: todo.isDone}">{{todo.title}}</span>
				<b class="close" v-on:click="rmTodo(index)"></b>
			</li>
		</ul>
	</div>
</body>

</html>
<script src="./vue.js"></script>
<script>
	let _todos = [
		{
			title: 1,
			isDone: true
		},
		{
			title: 22,
			isDone: false
		}
	];

	new Vue({
		el: '#container',
		data: {
			todos: _todos,
			todo: '',
			show: ''
		},
		methods: {
			changeShow(val) {
				this.show = val; 
			},
			addTodo() {
				this.todos.push({
					title: this.todo,
					isDone: false
				});
				this.todo = '';
			},
			rmTodo(index) {
				console.log(index);
				this.todos.splice(index, 1);
			}
		},
		computed: {
			undoneLen: {
				get() {
					return this.todos.filter(item => !item.isDone).length
				}
			}
		}
	})

</script>

样式部分:

<style>
		#container {
			width: 80%;
			margin: auto;
		}
		
		#addTodo {
			width: 100%;
			height: 2em;
		}
		
		.todos {
			list-style: none;
			margin-left: 0;
			padding-left: 0;
		}
		.todos li {
			width: 100%;
			border-bottom: 1px solid #808080;
			opacity: 0.7;
		}
		.todos li:hover {
			opacity: 1;
			border-bottom: 1px solid yellowgreen
		}
		.completed {
			text-decoration: line-through;
			color: lightgray
		}
		
		.statistics {
			color: red;
		}

		.close {
			clear: both;
			float: right;
			background: white;
			color:black;
			text-align: center;
			padding: 1px;
			font-size: 1;
			vertical-align: middle;
		}
		.close::after {
			content: '\2717';
			width: 12px;
			height: 12px;
			background: white;
			opacity: 0.1
		}
		.close:hover::after{
			opacity: 1
		}

		.check-symbol {
			width: 1.5em;
			display: inline-block;
		}

		.checked input {
			display: none;
		}
		.checked::after {
			content: '\2713';
			background: white;
		}
		.show-tab{
			float: right;
			margin-left: 5px
		}
	</style>

不会样式, 百度并自己修改的...

效果图: