vue中calss 动态绑定实现下拉列表

交代下背景：现在在做一个vue项目，需要实现班级的逻辑是：如下图所示：初始状态下箭头自动向下（收起状态）,点击某个班级时，右侧箭头自动变为向上（展开状态），起初我想通过MUI或者Mint-Ui来引入插件，后发现自己手写会更加快一些，这里箭头用的是伪元素生成的，大体思路是：

1.在当前li标签中添加span标签（父标签），设置当前span的伪元素为正方形，并旋转45°

2.将当前span标签（父标签）的宽度设置为 伪元素旋转后的宽度（开跟 伪元素原始宽高 平方和），高度为 伪元素旋转后宽度的一半

3.设置span标签（父标签）overflow:hidden;

，具体代码如下：

/*点击显示班级明细*/.show-btn,.hide-btn{float: right;position: relative;display:inline-block;border:1px solid #fff;box-sizing: border-box;width:14px;height:8px;top:5px;overflow: hidden;right:10px;}.show-btn:before,.hide-btn:before{box-sizing: border-box;content:"";width:10px;height:10px;display:inline-block;transform:rotate(45deg);border:1px solid #8F8F8F;position: absolute;left: 1px;bottom:2px;}.hide-btn:before{bottom:-6px;}

大体结构生成以后，在手指触摸的时候需要改变伪元素的bottom 值，用来显示不同的伪元素样式：

 <li class="mui-table-view-cell classList" v-for="(item,index) in myClassList" v-on:click="showClass(index)"><!-- 班级列表 --><span v-text="item.className" class="class-name"></span> <span v-bind:class="{'hide-btn':flag[index],'show-btn':!flag[index]}"></span><!-- 每个班级的学生列表 --><ul v-show="subItemShow[index]" class="stuList"><router-link to="/personal/personalCenter"><li v-for="subItem in myClassList[index].member" class="students"><span class="photo" v-bind:style="{background:'url('+subItem.img+') center center',backgroundSize:'cover'}"></span><span v-text="subItem.nickname"></span><span class="job" v-text="subItem.job"></span></li></router-link></ul></li>

其中，flag为一个数组，用来控制当前li标签中span（父标签）的显示状态，js控制代码如下：

getStatus(){//生成当前小图标状态for(var i =0 ;i<this.myClassList.length;i++){this.flag.push(false);this.subItemShow.push(false);}},showClass(id){this.getStatus();if(this.flag[id]){this.flag[id]=false;this.subItemShow[id]=false;}else{this.flag[id]=true;this.subItemShow[id]=true;}},

在页面初始化完成时，根据当前班级列表里班级的个数，在falg中追加 false ，意为当前班级未显示详细成员，在用户点击当前班级里列表时，改变对应的flag值，用来显示当前点击班级的详细成员，这里的坑是，getStatus方法不能放在created中调用，必须放在showClass方法中调用，因为每一次在用户点击某一个班级列表的时候都需要将其他里列表的状态变为false（收起状态），放在created中只会执行一次，不是想要的结果，至此，就完成了点击单个班级列表，列表的箭头向上，表示当前列表展开，班级信息显示，点击其他列表或再次点击当前列表时，箭头向下，表示当前列表收起