后端循环的数据做成折叠面板的样式

html部分：

 <div class="item" v-for="(item,index) in projectInfo.posts_list" :key="item.posts_id">
                        <img class="job_list_down_up" src="~/assets/img/arrow-down.png" v-if="item.showDown" alt="" srcset="" /> //展开/关闭箭头图标
                            <img class="job_list_down_up" src="~/assets/img/arrow-up.png" v-if="item.showUp" alt="" srcset="" /> //展开/关闭箭头图标
                        <button @click="seeDetail(index)">点击展开/关闭</button>
                        <!--这里的name 和 css 类名第一个字段要一样-->
                        <transition name="draw">
                            <div class="box" v-show="item.isShow">{{item.posts_name}}</div>
                        </transition>

   </div>

Vue js部分：

 for (let i = 0; i < res.data.posts_list.length; i++) {
                    res.data.posts_list[i].isShow = false;
                    res.data.posts_list[i].showDown = true; //控制上下箭头图标
                    res.data.posts_list[i].showUp = false;
        }

你需要对返回的list数据插入一个isShow==false的变量来控制展开和关闭。

seeDetail(index) {
            console.log(index);
            let that = this;
            let listData = that.projectInfo.posts_list; //原来的数据list
            let isShow = that.projectInfo.posts_list[index].isShow; // 先用一个变量接收一个原来的状态值
             let showDown = that.projectInfo.posts_list[index].showDown;
            let showUp = that.projectInfo.posts_list[index].showUp;

            listData[index].showDown = !showDown; //控制上下箭头图标
            listData[index].showUp = !showUp;

            listData[index].isShow = !isShow;
            that.projectInfo.posts_list = listData;
        },

这是点击展开和关闭的点击方法。

css部分：

.box {
    height: 200px;
    width: 200px;
    overflow:hidden;//如果在box内嵌套其他元素，嵌套的内容不会跟随动画收起/展开,需要加上overflow:hidden
    background-color: black;
    color: #ffffff;
}
.draw-enter-active,
.draw-leave-active {
    transition: all 1s ease;
}
.draw-enter,
.draw-leave-to {
    height: 0;
}