0.目标与实现思路
目标 | 实现思路 |
---|---|
鼠标移到选项时显示删除按钮 | v-on搭配v-show |
点击删除 | v-on搭配数组(splice(num)弹出索引对应元素) |
1.鼠标移到选项时显示删除按钮
- 定义属性showIndex,值为1时表示:展示索引值为1的元素的删除按钮
- 鼠标移入某元素时,将showIndex改成该元素索引
- 鼠标移出某元素时,将showIndex恢复为默认值
-
在Vue对象中,为其添加属性"showIndex",默认值-1
-
定义mouseEnter(index)和mouseLeave(),在鼠标移入、移出时触发
-
将<li>的内容用<div>包裹,为其添加
v-on
指令:- @mouseEnter:鼠标移入时触发
- @mouseLeave:鼠标移出时触发
这样做的效果是:
- 鼠标移动到内容上时,触发函数mouseEnter(index)
- 鼠标移出内容时,触发函数mouseLeave()
-
定义按钮元素,为其添加
v-show
:当index===showIndex时显示
2.点击删除
1.在Vue对象中添加deleteTodo(index)函数
-
为按钮添加
v-on
指令@click