vue手风琴效果（项目笔记1）

今天是我第一次接触项目，怀着激动的心情写下第一篇博客！不知道几年后的我还会不会从事前端。
首先看下我的代码

 <!--手风琴区域html区-->
        <div id="soufen">
          <div class="soufens" v-for="item in accordion" :key="item.id">
            <p class="soufens-1active" :class="{'active':item.show}" @click="showToggle(item)">
              {{item.name}}
              <i class="el-icon-arrow-down down-arrow" :class="{'rotate':item.show}"></i>
            </p>
            <!--判断是否隐藏？-->
            <ul v-show="item.show">
              <li
                class="conter"
                v-for="item2 in item.wareModel"
                :key="item2.index"
                @click="loadPptWare(item2)"
              >
                <!-- <img src alt> -->
                <div class="details">
                  <div class="title">{{item2.wareName}}</div>
                  <div class="time">
                    <span>{{item2.author}}</span>
                    <span>{{item2.createdAt}}</span>
                  </div>
                </div>
              </li>
            </ul>
            
          </div>
        </div>
        <!--手风琴区域-->
        <!--js区-->
        export default {
            data(){
                return{
                     accordion: [],/*需要循环的数组*/
                }
            },
             methods: {
                    /*手风琴*/
        showToggle: function(item) {
            item.show = !item.show;
            this.accordion.forEach(v => {
                if (v.wareModel.length == 0) {
                    v.show = false;
                }
                if (v != item) {
                    v.show = false;
                }
            });
        },
        
        /*手风琴读取*/
        sou() {
            this.$axios.get('你的接口').then(res => {
             /*如果后台没有传入show字段就需要自己前台循环进去一个字段*/
                res.datas.forEach(v => { 
                    v.show = false;
                });
                console.log(res.datas);
                this.accordion = res.datas;
                // this.newaccordion = JSON.parse(JSON.stringify(this.accordion));
            });
          
        },
             }
        }
        <!--css区-->
        /*手风琴css*/
<style lang="scss" scoped>
#soufen {
    margin-top: 32px;
}
.soufens-1active {
    display: flex;
    line-height: 41px;
    background-color: #26262b;
    border-radius: 40px;
    margin: 0 30px;
    padding-left: 15px;
    padding-right: 15px;
    color: #fff;
    justify-content: space-between;
    position: relative;
    z-index: 999;
    &.active {
        background-color: #366633;
    }
}
.soufens-1 {
    position: relative;
    line-height: 41px;
    background-color: #26262b;
    border-radius: 40px;
    margin: 0 30px;
    color: #fff;
}
.soufens {
    margin-bottom: 16px;
}
.soufens ul {
    position: relative;
    top: -10px;
    margin-top: -32px;
    background-color: #26262b;
    padding: 22px 20px;
    margin: 0 30px;
    margin-top: 20xp;
    cursor: pointer;
}
.soufens li {
    list-style: none;
    color: #fff;
}
.soufens ul .conter {
    display: flex;
    margin-bottom: 20px;
}
.soufens ul .conter img {
    width: 60px;
    height: 60px;
    border: 1px solid #fff;
}
.soufens ul .conter .details {
    display: flex;
    flex-direction: column;
    padding: 8px 17px;
}
.soufens ul .conter .details .title {
    color: #fff;
    margin-bottom: 15px;
}
.soufens ul .conter .details .time span {
    color: #fff;
}
.down-arrow {
    color: #fff;
    font-size: 20px;
    line-height: 41px;
    transition: 0.3s all;
    &.rotate {
        transform: rotate(-180deg);
    }
}
</style>

其实我的思想和网上的大部分手风琴差不多，就是在数组里面添加判断是否开启子菜单的布尔值，但是唯一的遗憾是没实现过渡效果，希望自己以后能修改过来