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

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

 
        

          

            

              {{item.name}}
              
            
            
            

              

                
                

                  
{{item2.wareName}}
                  

                    {{item2.author}}
                    {{item2.createdAt}}
                  
                
              
            
            
          
        
        
        
        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*/

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