当前位置：首页 > VUE

vue实现点击展开详情

2026-02-23 10:12:08VUE

实现点击展开详情功能

在Vue中实现点击展开详情功能可以通过以下方法完成：

使用v-show或v-if控制显示隐藏

通过data中的布尔值变量控制详情内容的显示与隐藏：

<template>
  <div>
    <button @click="toggleDetail">点击展开详情</button>
    <div v-show="showDetail">
      这里是详情内容...
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDetail: false
    }
  },
  methods: {
    toggleDetail() {
      this.showDetail = !this.showDetail
    }
  }
}
</script>

使用CSS过渡动画增强效果

为展开/收起添加平滑的过渡效果：

<template>
  <div>
    <button @click="toggleDetail">{{ showDetail ? '收起' : '展开' }}详情</button>
    <transition name="fade">
      <div v-show="showDetail" class="detail-content">
        详情内容...
      </div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s, max-height 0.3s;
  max-height: 500px;
  overflow: hidden;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  max-height: 0;
}
.detail-content {
  padding: 10px;
  border: 1px solid #eee;
}
</style>

使用第三方组件库

如使用Element UI的Collapse组件：

<template>
  <el-collapse>
    <el-collapse-item title="点击查看详情">
      <div>这里是详情内容...</div>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import { ElCollapse, ElCollapseItem } from 'element-plus'
export default {
  components: {
    ElCollapse,
    ElCollapseItem
  }
}
</script>

动态内容展开

当详情内容需要异步加载时：

vue实现点击展开详情

<template>
  <div>
    <button @click="loadDetail" :disabled="loading">
      {{ loading ? '加载中...' : (showDetail ? '收起' : '展开') }}
    </button>
    <div v-show="showDetail">
      {{ detailContent }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDetail: false,
      loading: false,
      detailContent: ''
    }
  },
  methods: {
    async loadDetail() {
      if (this.showDetail) {
        this.showDetail = false
        return
      }

      this.loading = true
      try {
        const res = await fetchDetailData() // 假设的API调用
        this.detailContent = res.data
        this.showDetail = true
      } finally {
        this.loading = false
      }
    }
  }
}
</script>