vue实现展开收起

<template>
  <div class="select-box">
    <div class="select-box-top">
      <label>项目名称</label>
      <span v-if="isShowNameType" @click="handleIsShowNameType">展开</span>
      <span v-if="!isShowNameType" @click="handleIsShowNameType">收起</span>
    </div>
    <ul class="select-list" :style="isShowNameType ? activeNameStyle : showNameStyle" style="width:400px;list-style:none;border: 1px solid red;height: 400px;">
      <li @click="selectNameType(index, item)" v-for="(item, index) in proNameList"
        :class="activeNameIndex == index ? 'active' : ''" :key="index" style="height:0px 30px 30px 30px;width:100px;background:pink;display: block;float: left;margin:5px;">
        {{ item.project_name }}
      </li>
    </ul>
    <h2>
      标题标题
    </h2>
  </div>
</template>
<script>
  // import { defineComponent } from '@vue/composition-api'

  export default {
    data() {
      return {
        activeNameStyle: 'height: 1.44rem; overflow: hidden;',
        showNameStyle: 'min-height: 1.44rem;',
        isShowNameType: true,
        activeNameIndex: null,
        proNameList: [{
            project_id: 1,
            project_name: "初始项目"
          },
          {
            project_id: 1,
            project_name: "初始项目"
          },
          {
            project_id: 1,
            project_name: "初始项目"
          },
          {
            project_id: 1,
            project_name: "初始项目"
          },
          {
            project_id: 1,
            project_name: "初始项目"
          },
          {
            project_id: 1,
            project_name: "初始项目"
          },
          {
            project_id: 1,
            project_name: "初始项目"
          },
          {
            project_id: 1,
            project_name: "初始项目"
          },
          {
            project_id: 1,
            project_name: "初始项目"
          },
          {
            project_id: 1,
            project_name: "初始项目"
          }
        ]
      }
    },
    methods: {
      handleIsShowNameType() {
        this.isShowNameType = !this.isShowNameType;
      },
      selectNameType(index, item) {
        this.activeNameIndex = index;
      },
    }
  }
</script>