vue实现展开跟收缩功能

摇摆123
  • 4
新手上路,请多包涵

image.png

image.png
初始化
image.png

image.png
期望能展开收缩

回复
阅读 408
2 个回答
linong
  • 25.8k

看了你几个问题,还是先暂停一下,把思路调整调整吧。要用双向绑定的思路去思考问题。简单来说,页面只是用HTML和CSS去呈现了变量的值,你只需要关注如何给变量正确赋值就好,而不是总想着去操作dom。

你这个问题的逻辑大致如下:

  1. 变量this.showDetails是一个布尔值(data: {showDetails: false})
  2. 显示一个按钮,点击后会令showDetails = !showDetails(methods,略)
  3. 按钮的文字为showDetails ? 隐藏 : 展开
  4. 如果showDetails为真,显示详情(注意,不是给详情加上一个style,然后display = showDetails ? 'block' : 'none')

如果数据量不大,通常直接拉取了,只不过是否显示的问题。

你的todo也是相似的,直接表达结果就好了。如果数据列表未拉取显示按钮,否则不显示按钮。因为数据拉取操作会更新数据列表,数据列表更新了自然导致按钮的显示隐藏跟着变化。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ,欢迎正在阅读的你也加入。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏