vue中使用原生实现展开折叠效果

		<div class="oBank">
          <span class="bankName">银行(复选):</span>
          <ul ref="List" class="oUl">
            <li v-for="city in cities" :key="city">{{city}}</li>
          </ul>
          <div class="oIcon">
            <span @click="isCollapse = !isCollapse">
              <!-- 展开 -->
              {{isCollapse ? '展开' : '收起'}}
            </span>
            <i :class="{
              'el-icon-arrow-down' : isCollapse,
              'el-icon-arrow-up' : !isCollapse
            }"></i>
          </div>
        </div>
      </div>

 data () {
    return {
      isCollapse: false,
    }
  },
  //监听 展开或者收起
 watch: {
    isCollapse(value) {
      if (!value) {
        this.$refs.List.style.overflow = "hidden"
        this.$refs.List.style.height = "30px"
      } else {
        this.$refs.List.style.overflow = "auto"
        this.$refs.List.style.height = "auto"
      }
    }
  },

ul,ol,li {
  list-style: none;
}
.oBank {
  display: flex;
  justify-content: space-between;
}
.oUl {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  width: 85%;
  height: 30px;
  overflow: hidden;
  li {
    margin: 0 10px;
    margin-bottom: 10px;
  }
}