删除一条;
1.鼠标移入移除这一条时颜色有变化

2.删除当前的todo

===================================================================

显示隐藏背景的变化,首先加监听

1.区别两对属性;

onmouseenter="" onmouseleave=""
onmouseover="" onmouseout=""
区别:

(1).进来的时候mouseenter和mouseover都会触发

(2).内部div进入内部div时,会触发mouseout;最内部出来时执行mouseover;出最外面div时才会触发mouseleave

====================================================================================================================================

1.

2.

3.

=================================================================================================================================

页面展示出错:

说todoDelete未定义,原来是在App.vue组件中:写成了;

厉害了!!!

(尚028)Vue_案例_交互删除的更多相关文章

  1. (尚024)Vue_案例_交互删除

    注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...

  2. (尚029)Vue_案例_交互footer组件功能

    需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...

  3. (尚027)Vue_案例_交互添加

    TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应 ...

  4. (尚023)Vue_案例_交互添加

    最终达到效果: 1.做交互,首先需要确定操作哪个组件? 提交------操作组件Add.vue 2.从哪开始做起呢? 从绑定事件监听开始做起,确定你跟谁绑定事件监听,在回调函数中做什么, ====== ...

  5. (尚034)Vue_案例_数据存储优化(代码优化!!!)

    最好能将上述代码抽取成一个模块(读json数据+写json数据) 1.在src下新建文件夹util(util文件夹用于放入工具的模块) 2.*使用localStorage存储数据的工具模块* 一个模块 ...

  6. (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))

    组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js ============================ ...

  7. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)

    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...

  8. (尚030)Vue_案例_存储数据(localStorage本地存储技术)

    当刷新页面时,会变为原来的状态 1.问题:当我刷新是不希望改变原来状态 需要缓存我当前的数据 2.究竟是缓存在内存里还是在文件里??? 缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏 ...

  9. (尚026)Vue_案例_动态初始化显示(尚025)

    (1).当前页面需要变化什么样的数据? 答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型' (2).数组 ...

随机推荐

  1. DDR3（3）：写控制

    调取的 DDR3 控制器给用户端预留了接口,用于实现对该 IP 核的控制,本篇介绍一下 DDR3 IP核写.在生成 DDR3 IP 核的界面中,可以找到 User Guide 手册,DDR3 的使用将 ...

  2. bypass-media 模式30秒挂断

    语音正常,但是通话30秒后自动挂断, 服务器为阿里云,专网模式 修改ext-sip-ip 为公网ip

  3. 开源规则引擎 Drools 学习笔记 之 -- 1 cannot be cast to org.drools.compiler.kie.builder.impl.InternalKieModule

    直接进入正题 我们在使用开源规则引擎 Drools 的时候, 启动的时候可能会抛出如下异常: Caused by: java.lang.ClassCastException: cn.com.cheng ...

  4. （原创）理解主机设备（PLC，PC机）之间的以太网通信

    主机设备:PC机,PLC 网络设备:家用路由器 局域网包括了有线局域网和无线局域网(WIFI).怎么去使用2者? 网络设备的职责最终目的为了帮助2台主机的数据传输.路由器,交换机范围不同,目的相同.在 ...

  5. Map作为缓存使用

    public class MapCache { /** * 默认存储1024个缓存 */ private static final int DEFAULT_CACHES = 1024; private ...

  6. CodeForces 536D Tavas in Kansas

    洛谷题目页面传送门 & CodeForces题目页面传送门 A和B在一张无向连通图\(G=(V,E),|V|=n,|E|=m\)上玩一个游戏,节点\(i\)有一个权值\(v_i\).A.B分别 ...

  7. Java自学-异常处理 处理

    Java的异常处理办法 try catch throws 异常处理常见手段: try catch finally throws 步骤 1 : try catch 1.将可能抛出FileNotFound ...

  8. Boleto 银行付款

    Boleto是由多家巴西银行共同支持的一种支付方式,在巴西占据绝对主导地位,客户可以到巴西任何一家银行.ATM机.caipiao网点或使用网上银行授权银行转账. 该支付渠道有如下特点:1. 一旦付款, ...

  9. 使用MQ消息队列的优缺点

    前言 公司的项目一直都是在使用MQ的,但是由于使用的功能很简单,所以一直都是知其然不知其所以然,作为一个程序猿有必要了解每一个使用的技术,为什么使用它?它的优点是什么?缺点是什么?等等... 使用mq ...

  10. 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）

    CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...