1、实现的效果（视频演示）

任务清单小功能

2、重点讲解（编辑的实现）

2.1 提示（官网介绍nextTick的用法）

3、编辑功能的核心代码

<template><li><label><inputtype="checkbox":checked="todo.done"@change="handleCheck(todo.id)"/><span v-show="!todo.isEdit">{{ todo.title }}</span><inputtype="text"v-show="todo.isEdit":value="todo.title"@blur="handleBlur(todo, $event)"ref="inputTitle"/></label><buttonv-show="!todo.isEdit"class="btn btn-edit"@click="handleEdit(todo)">编辑</button><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button></li>
</template><script>
import pubsub from "pubsub-js";
export default {name: "MyItem",//声明接收todo、checkTodo、deleteTodoprops: ["todo"],methods: {//编辑handleEdit(todo) {if (todo.hasOwnProperty("isEdit")) {todo.isEdit = true;} else {this.$set(todo, "isEdit", true);}this.$nextTick(function () {this.$refs.inputTitle.focus();});},//输入框失去焦点handleBlur(todo, e) {todo.isEdit = false;if (!e.target.value.trim()) return alert("输入不能为空");this.$bus.$emit("updateTodo", todo.id, e.target.value);},//勾选or取消勾选handleCheck(id) {//通知App组件将对应的todo对象的done值取反//   this.checkTodo(id);this.$bus.$emit("checkTodo", id);},//删除handleDelete(id) {if (confirm("确定删除吗？")) {//通知App组件将对应的todo对象删除// this.deleteTodo(id);// this.$bus.$emit('deleteTodo',id)// 消息发布pubsub.publish("deleteTodo", id);}},},
};
</script>
<style scoped>
/*item*/
li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;
}li label {float: left;cursor: pointer;
}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;
}li button {float: right;display: none;margin-top: 3px;
}li:before {content: initial;
}li:last-child {border-bottom: none;
}li:hover {background-color: #ddd;
}li:hover button {display: block;
}
</style>

4、完整的代码

地址链接：https://download.csdn.net/download/weixin_43304253/86501842

5、以往练习

1、Vue中组件化编码使用：练习一
2、Vue中组件化编码使用、实现组件之间的参数传递：练习二
3、Vue中组件化编码完成任务的添加、删除、统计、勾选需求：练习三
4、纯Vue实现网页日常任务清单小功能（数据存储在浏览器）：存储

任务清单小功能的实现（任务的增、删、改、查、存储）使用Vue实现相关推荐

pyRedis - 操作指南:增/删/改/查、管道与发布订阅功能
文章目录 1 redis docker 部署与安装 2 py - redis的使用 2.1 redis的连接 2.2 常规属性查看 2.2.2 关于删除 2.3 STRING 字符串的操作 2.4 H ...
PHP编写增功能思路,php ztree如何实现增删改
php ztree增删改的实现方法:1.通过"addHoverDom"等方法实现增加ztree节点:2.通过"onRemove"回调函数实现删除节点:3.使用& ...
vue-orgchart 实现节点的增删改功能
UI框架是 ant-design-vue 导出图片我是自己重新写的,要下载 html2canvas vue-orgchart 属性说明在这篇文章中https://blog.csdn.net/wei ...
iOS 生成带 logo 的二维码，区域截屏保存至相册（小功能二连发 (一)）
原文链接:http://www.jianshu.com/p/36e9f012ef39 生成带 logo 的二维码区域截屏相关 -- 由3033分享开篇最近项目需要搞了几个相对独立的小功能,今天有 ...
高德地图小蓝点_一会晴天一会下雨？夏日想要顺利出行高德地图这些小功能最实用...
不同于其他三个季节,夏天总是有很多种烦恼,变化不定的天气就是其中最为影响出行的一项因素.而面对忽晴忽雨的天气,如何才能在夏日顺利出行呢?看看高德地图的这些实用小功能吧. ·实时天气预报高德地图可以实 ...
猫猫学iOS（四十五）之常用的小功能比如打电话、打开网址、发邮件、发短信打开其他应用。...
猫猫分享,必须精品原创文章,欢迎转载.转载请注明:翟乃玉的博客地址:http://blog.csdn.net/u013357243?viewmode=contents 简介 iOS中的很多小功能都 ...
手机息屏后停止_手机息屏还能这样玩？华为这几个隐藏小功能快学起来
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注. 注:本文转载自网络,如有侵 ...
android 常用小功能(第二版)
经历过一段岁月,转眼2013的半年都过去了,第二版整理好的小功能,答应大家发布的,直到今日,终于和大家相见了,第二版没有第一版多,大家也可以去参考第一版的内容,希望大家使用愉快! 目录: 1.获取当前 ...
Unity3D小功能小技巧小教程小原理(持续更新...)
Unity3D小功能小技巧小教程小原理(持续更新...) 1.Unity的.NET版本是2.0 按道理来说,C#能用的功能Unity也能用,但是Unity的.NET却不是最新版要是用一些别的D ...

任务清单小功能的实现（任务的增、删、改、查、存储）使用Vue实现

文章目录

1、实现的效果（视频演示）

2、重点讲解（编辑的实现）

2.1 提示（官网介绍nextTick的用法）

3、编辑功能的核心代码

4、完整的代码

5、以往练习

任务清单小功能的实现（任务的增、删、改、查、存储）使用Vue实现相关推荐

最新文章

热门文章