vue实现展开跟收缩功能

Question

初始化

期望能展开收缩

Answer 1

你都用了 elementui 了，为什么不用 https://element.eleme.io/#/zh... 组件呢？

---

而且你为什么要用 DOM 操作呢？ 比如说 getElementById 和 setAttribute。对应到 vue 中有 $refs 和 v-bind

你还不如 classList.toggle 呢

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

Answer 2

看了你几个问题，还是先暂停一下，把思路调整调整吧。要用双向绑定的思路去思考问题。简单来说，页面只是用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 周年「问答」打卡 ，欢迎正在阅读的你也加入。