基于Vue2.0 + ElementUI开发论坛评论与回复功能

<template>
  <div class="comment-list">
    <div class="comment-item" v-for="(comment, index) in comments" :key="index">
      <div class="comment-info">
        <span class="username">{{ comment.username }}</span>
        <span class="post-time">{{ formatTime(comment.postTime) }}</span>
      </div>
      <div class="comment-content">{{ comment.content }}</div>
      <div class="reply-list">
        <div class="reply-item" v-for="(reply, replyIndex) in comment.replies" :key="replyIndex">
          <div class="reply-info">
            <span class="replier">{{ reply.replier }}</span>
            <span class="reply-time">{{ formatTime(reply.replyTime) }}</span>
          </div>
          <div class="reply-content">{{ reply.replyContent }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      comments: [
        // 假设的评论数据，包含回复
        // ...
      ]
    };
  },
  methods: {
    formatTime(time) {
      // 格式化时间的方法
      // ...
    }
  }
};
</script>
 
<style scoped>
.comment-list {
  /* 样式 */
}
.comment-item {
  /* 样式 */
}
.comment-info {
  /* 样式 */
}
.username {
  /* 样式 */
}
.post-time {
  /* 样式 */
}
.comment-content {
  /* 样式 */
}
.reply-list {
  /* 样式 */
}
.reply-item {
  /* 样式 */
}
.reply-info {
  /* 样式 */
}
.replier {
  /* 样式 */
}
.reply-time {
  /* 样式 */
}
.reply-content {
  /* 样式 */
}
</style>

这个代码实例展示了如何在Vue组件中使用嵌套循环来展示一个论坛的评论和回复列表。comments数组中的每个元素代表一个评论，每个评论对象包含用户名、发布时间和内容，以及一个回复列表。每个回复包含回复者名字、回复时间和回复内容。formatTime方法用于格式化时间，这是一个需要根据实际需求实现的方法。