VUE实现点击下拉显示与隐藏信息方法

2024-10-14 11:32:06

1、点击下拉箭头,展示隐藏的内容,再次点击上拉箭头,隐藏显示的内容

VUE实现点击下拉显示与隐藏信息方法

2、对应代码如下,项号2对应代码

VUE实现点击下拉显示与隐藏信息方法

4、首先,编写点击事件的方法:

VUE实现点击下拉显示与隐藏信息方法

6、下面再编写隐藏栏的内容及幼榍嘈酾判断方法。主要通过下图的div进行控制,如果满足条件,则显示该div包裹的所有内容。

VUE实现点击下拉显示与隐藏信息方法

8、当再次点击后,会再次调用点击事件,使原来的true置为false。重新隐藏对应的子栏内容。

猜你喜欢