用VUE做一个简单的ToDo list （代码可直接运行）

最新推荐文章于 2024-09-06 17:00:53 发布

阿刁爱学习

最新推荐文章于 2024-09-06 17:00:53 发布

阅读量380

点赞数

分类专栏： VUE 文章标签： vue javascript html css

本文链接：https://blog.csdn.net/ffffffffhh/article/details/108779139

版权

Vue.js Element UI TodoList 前端开发 Vant

关键词由CSDN通过智能技术生成

VUE 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

用VUE做一个简单的ToDo list （代码可直接运行）

	**使用时需要联网使用**
	需要引用vant和element

开发环境
vue

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 		<script src="./js/vue.js"></script> -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css">
			body {
				background-color: aquamarine;
			}

			.main {
				background: #ffffff;
				width: 540px;
				height: 500px;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				padding: 0px 40px 40px 40px;
				box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
				z-index: 99999;
				border-radius: 3px;
			}
		</style>
		<title>ToDo</title>
	</head>
	<body>
		<div class="main" id="app">
			<h1>ToDo</h1>
			<van-field v-model="inputValue" center clearable placeholder="添加事件">
				<template #button>
					<el-button type="success" icon="el-icon-circle-plus" @click="todoAdd" circle></el-button>
				</template>
			</van-field>

			<van-collapse v-model="activeNames">
				<van-collapse-item title="进行中" name="1">
					<ul>
						<dl type="checkbox" v-for="(item,index) of lists" :key="index">
							{{item}}
							<el-button type="success" icon="el-icon-check" @click="WanChen(index)" circle></el-button>
							<el-button type="primary" icon="el-icon-edit" @click="todoEdit(index)" circle></el-button>
							<el-button type="danger" icon="el-icon-delete" @click="todoDel(index)" circle></el-button>
						</dl>
					</ul>
				</van-collapse-item>
				<van-collapse-item title="已完成" name="2">
					<ul>
						<dl type="checkbox" v-for="(item,index) of Wlists" :key="index">
							{{item}}
							<el-button type="danger" icon="el-icon-error" @click="HuanYuan(index)" circle></el-button>
						</dl>
					</ul>
				</van-collapse-item>

				<van-collapse-item title="回收站" name="3">
					<ul>
						<dl type="checkbox" v-for="(item,index) of Dlists" :key="index">
							{{item}}
							<el-button type="danger" icon="el-icon-error" @click="DHuanYuan(index)" circle></el-button>
						</dl>
					</ul>
				</van-collapse-item>


		</div>

		<script>
			var vue = new Vue({
				el: "#app", //el标签：定义控制范围
				data: {
					ZhuangTai: '1',
					inputValue: '',
					lists: [],
					Dlists: [],
					Wlists: [],
					s: "",
					activeNames: ['1']
				},
				methods: {

					todoAdd: function() {
						if (this.inputValue != "") {
							if (this.ZhuangTai == "1") {
								this.lists.push(this.inputValue);
								this.inputValue = '';
							} else {
								this.list[this.num] = this.inputText;
								this.ZhuangTai = 1;
							}
						} else {
							alert("输入不能为空");
						}
					},

					todoDel: function(index) {

						this.Dlists.push(this.lists[index])
						this.lists.splice(index, 1);
					},
					todoEdit: function(index) {
						this.inputValue = this.lists[index];
						this.s = index;
						this.lists.splice(index, 1);

					},

					WanChen: function(index) {
						this.Wlists.push(this.lists[index])
						this.lists.splice(index, 1);
					},
					HuanYuan: function(index) {
						this.lists.push(this.Wlists[index])
						this.Wlists.splice(index, 1);
					},
					DHuanYuan: function(index) {

						this.Dlists.splice(index, 1);
					}

				}
			});
		</script>

	</body>
</html>