vue实现ToDoList待办事项/清单_vue待办事项

1、这个功能运用的知识点比较多，computed计算，watch监听，directives自定义指令和methods定义事件，还有一些属性绑定，列表渲染，表单绑定指令，按键修饰符，表单修饰符等...

2、部分知识点

3、效果展示

功能说明：

1.在头部输入框内输入内容按回车键即可待办事项

2.单击待办项的前面选择框可实现未完成或已完成切换

3.双击待办内容可以修改里面的内容，修改完成后点击空白处或enter键都可实现修改，如果不想修改按Esc键可恢复初始内容。

4.单击待办事项最后删除按钮可删除该待办项

5.表头右边的数字是未完成和已完成的待办事项数量

6.另外待办事项的数据已存储在本地，保留已有数据（换浏览器需重新添加）

7.具体功能请亲自操作尝试

4、代码

vue.js引入（vue.js引入地址记得修改）

css代码：

<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			body {
				background-color: #cdcdcd;
			}
			.header {
				width: 100%;
				height: 50px;
				background-color: #323232;
			}
			.header div{
				width: 600px;
				height: 50px;
				margin: auto;
			}
			.header h1 {
				float: left;
				width: 100px;
				line-height: 50px;
				color: #DDD;
				font-weight: 400;
				font-size: 24px;
				cursor: pointer;
			}
			.header input {
				float: right;
				width: 60%;
				height: 24px;
				margin-top: 12px;
				text-indent: 10px;
				border-radius: 5px;
				box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
				border: none;
			}
			.content {
				width: 600px;
				margin: auto;
			}
			h3 {
				font-size: 24px;
				width: 600px;
				height: 30px;
				margin: 20px 0;
				vertical-align: middle;
			}
			h3>span{
				width: 20px;
				height: 20px;
				float: right;
				font-size: 14px;
				color: #666;
				margin-top: 5px;
				text-align: center;
				border-radius: 50%;
				background-color: #e6e6fa;
			}
			.item {
				height: 32px;
				line-height: 32px;
				background: #fff;
				position: relative;
				margin-bottom: 10px;
				padding: 0 15px;
				border-radius: 3px;
				border-left: 5px solid #629A9C;
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
			}
			.list:nth-of-type(2) .item{
				opacity: 0.5;
			}
			.item input:nth-of-type(1) {
				width: 22px;
				height: 22px;
				margin-top: 5px;
			}
			.item input:nth-of-type(2) {
				width: 200px;
				height: 22px;
				vertical-align: middle;
				margin-bottom: 13px;
			}
			.item span {
				vertical-align: top;
			}
			.item button {
				float: right;
				width: 22px;
				height: 22px;
				margin-top: 5px;
			}
		</style>

 html代码：

<div id="app">
			<div class="header">
				<div>
					<h1>ToDoList</h1>
					<!-- .trim去除文本中的空格 -->
					<input type="text" placeholder="添加ToDo" v-model.trim="temp" @keyup.enter="addItem()">
				</div>
			</div>
			<div class="content">
				<h3>未完成<span>{{not()}}</span></h3>
				<div class="list">
					<!-- 遍历list数据 -->
					<div class="item" v-for="item in undolist " :key="item.title">
						<input type="checkbox" v-model="item.done">
						<!-- @dblclick 双击让临时数据设置为当前标题;修改状态为1代表编辑 -->
						<!-- v-show="item.state==0" 当编辑状态为0时候才显示 -->
						<span @dblclick="editTemp=item.title;item.state=1" v-show="item.state==0">{{item.title}}</span>
						<!-- v-model="editTemp" 绑定临时数据 -->
						<!-- @keyup.enter 回车键修改当前行的数据;更改编辑状态为0正常显示状态-->
						<!-- @blur="item.title=editTemp;item.state=0;" 失去焦点完成修改-->
						<!-- @keyup.esc esc键把当前行的编辑为0 正常;正在编辑的数据等于原来的数据-->
						<input type="text"
						v-model="editTemp" 
						v-show="item.state==1" 
						v-focus="item.state==1"
						@keyup.enter="item.title=editTemp;item.state=0;"
						@blur="item.title=editTemp;item.state=0;"
						@keyup.esc="item.state=0;editTemp=item.title;"
						>
						<!-- 删除按钮 -->
						<button @click="delItem(item)">X</button>
					</div>
				</div>
				<h3>已完成<span>{{finish()}}</span></h3>
				<div class="list">
					<!-- 遍历list数据 -->
					<div class="item" v-for="item in dolist " :key="item.title">
						<!-- 是否选中 -->
						<input type="checkbox" v-model="item.done">
						<!-- 标题 -->
						<span @dblclick="editTemp=item.title;item.state=1" v-show="item.state==0">{{item.title}}</span>
						<input type="text" 
						v-model="editTemp" 
						v-show="item.state==1" 
						v-focus="item.state==1"
						@keyup.enter="item.title=editTemp;item.state=0;"
						@blur="item.title=editTemp;item.state=0;"
						@keyup.esc="item.state=0;editTemp=item.title;"
						>
						<!-- 删除按钮 -->
						<button @click="delItem(item)">X</button>
					</div>
				</div>
			</div>
		</div>

 js代码：

<script>
			new Vue({
				el: "#app",
				data: {
					// list 清单列表数据
					// title清单的标题；done是否已经完成
					// 通过本地存储来获取数据
					list: JSON.parse(localStorage.getItem("list") || "[]"),
					temp: "", //临时标题
					editTemp: "", //编辑的临时数据
					editIndex: null, //记录编辑第几行
				},
				directives: {
					focus: {
						// 更新的时候执行
						update(el, binding) {
							console.log(binding.value)
							// 当自定义指令的值是true时候当前节点获取焦点
							if (binding.value) {
								el.focus();//输入框内容获取焦点
								// el.select();//输入框内容全选状态
							}
						}
					}
				},
				// 存 list数据，什么时候存？当list发送变化存，通过watch
				watch: {
					"list": {
						handler(nval) {
							localStorage.setItem("list", JSON.stringify(this.list))
						},
						deep: true
					}
				},
				// 计算出已经完成的数据，其实就是对list进行过滤，当done等于true保留
				computed: {
					// 未完成
					undolist() {
						// filter 过滤函数 当返回值是true 当前遍历的数据保留，返回为false当前数据过滤掉
						// 需要未完成保留  未完成done值为false 希望它保留取反！
						return this.list.filter(item => !item.done);
					},
					// 已完成
					dolist() {
						return this.list.filter(item => item.done);
					}
				},
				methods: {
					not(){
						var not = this.undolist.length;
						return not;
					},
					finish(){
						var finish = this.dolist.length;
						return finish;
					},
					editSure() {
						// 当editIndex为null就返回
						if (this.editIndex == null) {return};
						// 当确定编辑的时候，让list第正在编辑的标题等于 正在编辑的临时数据
						this.list[this.editIndex].title = this.editTemp;
						// 清空编辑临时数据
						this.editTemp = "";
						this.editIndex = null;
					},
					toEdit(title) {
						// 设置编辑的临时数据
						this.editTemp = title;
						// 查找出当前编辑的是第行数据
						this.editIndex = this.list.findIndex(item => item.title == title);
					},
					addItem() {
						// 创建一项清单
						var item = {title: this.temp,done: false,state: 0};
						// 在list的前面添加 item
						this.list.unshift(item);
						// 清空temp
						this.temp = "";
					},
					delItem(item) {
						console.log(item);
						// 查找item在list的下标
						// value遍历的元素当value的title值等于item的title
						var ind = this.list.findIndex(value => value.title === item.title);
						// 删除list第ind个
						// splice(从第几个，删除几个，添加内容)
						this.list.splice(ind, 1);
					}
				},
			})
		</script>

编写代码不易，记得点赞支持！！！