vue实现一个展开收起

需求

默认显示三行高度的数据，点击展开全部展示，点击收起还原显示三行数据

效果图

思路

默认设置高度，超出部分隐藏，点击展开去掉高度

代码

来点假数据

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: "初始项目"
}
]

html页面

<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">
    <li
      @click="selectNameType(index, item)"
      v-for="(item, index) in proNameList"
      :class="activeNameIndex == index ? 'active' : ''"
      :key="index"
    >
      {{ item.project_name }}
    </li>
  </ul>
</div>

js代码：

data() {
  return {
    activeNameStyle: 'height: 1.44rem; overflow: hidden;',
    showNameStyle: 'min-height: 1.44rem;',
    isShowNameType: true,
    activeNameIndex: null,
  }
},
methods: {
  handleIsShowNameType() {
    this.isShowNameType = !this.isShowNameType;
  },
  selectNameType(index, item) {
    this.activeNameIndex = index;
  },
}

css代码省略
单纯为了实现效果，细节还需进一步优化，欢迎提出其他意见