vue-列表下详情的展开与折叠案例

.arrow{
 position absolute
 width: 0.6rem;
 height: 0.3rem;
 top 2.0rem
 right 0.8rem
 background url(../../../assets/images/icon_up.png) no-repeat
 background-size: 100% 100%
 transition: transform 0.3s
 -webkit-transition: transform 0.3s
 &.open{
 transform : rotate(-180deg)
 }
}

 

...
 

// 展开与折叠
// 分析：
// 1，showDetail默认为-1，第一次任意点击B，当前B对象展开，showDetail=index=n，此时有两种情况：
// 情况1,再次点击B，showDetail===index，B关闭，showDetail=-1
// 情况2，点击B以外的其他对象C，先关闭B，在打开当前对象C
foldAndUnfold(index,item){
 if(this.showDetail===index){//两次点击的对象相同，关闭
 this.showDetail = -1
 }else{//点击的对象不同，先关闭前一对象，再打开当前对象
 this.showDetail = index
 }
}