Vue.js 实现评论回复展开：点击查看只显示当前评论回复

<template>
  <div>
    <div v-for="(comment, index) in comments" :key="index">
      <p>{{ comment.content }}</p>
      <button @click="showReplies(index)">查看回复</button>
      <div v-if="index === activeCommentIndex">
        <div v-for="(reply, replyIndex) in comment.replies" :key="replyIndex">
          <p>{{ reply.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      comments: [
        {
          content: '评论1',
          replies: [
            { content: '回复1-1' },
            { content: '回复1-2' }
          ]
        },
        {
          content: '评论2',
          replies: [
            { content: '回复2-1' },
            { content: '回复2-2' }
          ]
        }
      ],
      activeCommentIndex: -1
    };
  },
  methods: {
    showReplies(index) {
      this.activeCommentIndex = index;
    }
  }
};
</script>
<p>在上述代码中，<code>comments</code>数组存储了所有的评论和对应的回复，<code>activeCommentIndex</code>用于记录当前点击的评论的索引。在按钮的点击事件中，调用<code>showReplies</code>方法，并将当前评论的索引作为参数传入。在回复列表的v-if条件中，判断当前的索引是否和<code>activeCommentIndex</code>相等，如果相等，则显示该评论的回复列表。</p>