vue按钮收起展示控制div显示并且收起的时候按钮隐藏

<span id="alarmInfoTitle" @click="showList = !showList"
:class="{ alarmInfoTitlehide: !showList, alarmInfoTitleshow: showList }" title="故障列表">
{{ showList ? '展开' : '收起' }} </span>

  <div id="alarmInfoCon" v-show="showList">
    <p v-for="(item, index) in  filteredList" :key="index" :style="item.style">{{ item.name
    }}</p>
  </div>
</div>
展开的时候则显示出来。可以通过添加 CSS 类名来实现动画效果，
然后在代码中根据 showList 值来动态添加或移除类名：
    #alarmInfoTitle {
    width: 35px;
    line-height: 25px;
    position: absolute;
    top: 2px;
    left: -35px;
    font-size: 12px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border: 1px solid #999;
    border-right: 0px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
    }

    .alarmInfoTitlehide {
    opacity: 0;
    height: 0;
    padding: 0;
    margin: 0;
    transition: all 0.3s ease-out;
    }

    .alarmInfoTitleshow {
    opacity: 1;
    transition: all 0.5s ease-in-out;

    }