当前位置：首页 > VUE

vue实现多条回复展开

2026-02-22 14:08:36VUE

Vue 实现多条回复展开功能

使用 v-for 和 v-show/v-if 控制显示

在 Vue 中可以通过 v-for 循环渲染多条回复，配合 v-show 或 v-if 控制展开/折叠状态。数据格式可以设计为包含 isExpanded 属性的对象数组。

<template>
  <div>
    <div v-for="(reply, index) in replies" :key="index">
      <div class="reply-content" v-show="reply.isExpanded">
        {{ reply.content }}
      </div>
      <button @click="toggleReply(index)">
        {{ reply.isExpanded ? '收起' : '展开' }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      replies: [
        { content: '回复内容1', isExpanded: false },
        { content: '回复内容2', isExpanded: false },
        // 更多回复...
      ]
    }
  },
  methods: {
    toggleReply(index) {
      this.replies[index].isExpanded = !this.replies[index].isExpanded
    }
  }
}
</script>

使用计算属性实现全部展开/收起

如果需要同时控制所有回复的展开状态，可以添加计算属性和方法。

<template>
  <div>
    <button @click="toggleAll">{{ allExpanded ? '全部收起' : '全部展开' }}</button>
    <div v-for="(reply, index) in replies" :key="index">
      <div v-show="reply.isExpanded">{{ reply.content }}</div>
      <button @click="toggleReply(index)">
        {{ reply.isExpanded ? '收起' : '展开' }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    allExpanded() {
      return this.replies.every(reply => reply.isExpanded)
    }
  },
  methods: {
    toggleAll() {
      const shouldExpand = !this.allExpanded
      this.replies.forEach(reply => {
        reply.isExpanded = shouldExpand
      })
    }
  }
}
</script>

使用组件封装回复项

对于更复杂的场景，可以将单个回复封装为组件，提高代码复用性。

<!-- ReplyItem.vue -->
<template>
  <div>
    <div v-show="isExpanded">
      <slot></slot>
    </div>
    <button @click="isExpanded = !isExpanded">
      {{ isExpanded ? '收起' : '展开' }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ReplyItem v-for="(reply, index) in replies" :key="index">
      {{ reply.content }}
    </ReplyItem>
  </div>
</template>

添加动画效果

使用 Vue 的 transition 组件可以为展开/收起添加平滑的动画效果。

vue实现多条回复展开

<template>
  <div>
    <button @click="isExpanded = !isExpanded">切换</button>
    <transition name="fade">
      <div v-show="isExpanded" class="reply-content">
        回复内容...
      </div>
    </transition>
  </div>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>