Vue | 20.本地应用 - 小黑记事本 - 删除

0.目标与实现思路

目标	实现思路
鼠标移到选项时显示删除按钮	v-on搭配v-show
点击删除	v-on搭配数组(splice(num)弹出索引对应元素)

1.鼠标移到选项时显示删除按钮

• 定义属性showIndex，值为1时表示：展示索引值为1的元素的删除按钮
• 鼠标移入某元素时，将showIndex改成该元素索引
• 鼠标移出某元素时，将showIndex恢复为默认值

1. 在Vue对象中，为其添加属性"showIndex"，默认值-1

   

2. 定义mouseEnter(index)和mouseLeave()，在鼠标移入、移出时触发

   

3. 将<li>的内容用<div>包裹，为其添加v-on指令：

   • @mouseEnter：鼠标移入时触发
   • @mouseLeave：鼠标移出时触发

   这样做的效果是：

   • 鼠标移动到内容上时，触发函数mouseEnter(index)
   • 鼠标移出内容时，触发函数mouseLeave()

   

4. 定义按钮元素，为其添加v-show：当index===showIndex时显示

   

2.点击删除

1.在Vue对象中添加deleteTodo(index)函数

2. 为按钮添加v-on指令@click

   

3.效果演示