vue3内容超过一定高度点击查看与收起

<template>
  <div>
    <div :class="{ content: true, expanded: isExpanded }" @click="toggleExpand">
      <!-- 这里是可能超出高度的内容 -->
      动健康科技领域，主要围绕运动表现体能训练与康复服务、科学全民健身、智慧体育校园三大业务，通过“基础设施+软件系统+数据平台+健康服务”的方式，提供数字化运动健康整体解决方案。 长期为中国国家队、中国田径协会和各省市体育局训练基地提供运动表现数字化体能训练和康复服务，是国家体育总局“科技助力奥运”的重要力量。已经为2016年里约、2020。动健康科技领域，主要围绕运动表现体能训练与康复服务、科学全民健身、智慧体育校园三大业务，通过“基础设施+软件系统+数据平台+健康服务”的方式，提供数字化运动健康整体解决方案。 长期为中国国家队、中国田径协会和各省市体育局训练基地提供运动表现数字化体能训练和康复服务，是国家体育总局“科技助力奥运”的重要力量。已经为2016年里约、2020。
动健康科技领域，主要围绕运动表现体能训练与康复服务、科学全民健身、智慧体育校园三大业务，通过“基础设施+软件系统+数据平台+健康服务”的方式，提供数字化运动健康整体解决方案。 长期为中国国家队、中国田径协会和各省市体育局训练基地提供运动表现数字化体能训练和康复服务，是国家体育总局“科技助力奥运”的重要力量。已经为2016年里约、2020。
      <!-- 更多内容 -->
    </div>
    <button v-if="!isExpanded" @click="toggleExpand">查看更多</button>
    <button v-else @click="toggleExpand">收起</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const isExpanded = ref(false);
 
const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
};
</script>
 
<style scoped>
.content {
  overflow: hidden;
  max-height: 100px; /* 设定最大高度 */
  transition: max-height 0.3s ease;
}
 
.expanded {
  max-height: 1000px; /* 足够大，可以容纳所有内容 */
}
</style>