Vue入门攻略：轻松实现互动式评论回复功能，让你的项目更生动！

引言

Vue.js基础

在开始之前，确保你已经对Vue.js有一个基本的了解。如果你是Vue的新手，可以参考以下资源：

评论组件设计

1. 创建评论组件

<template>
  <div class="comment">
    <div class="comment-header">
      <span class="comment-author">{{ comment.author }}</span>
      <span class="comment-time">{{ comment.time }}</span>
    </div>
    <div class="comment-content">{{ comment.content }}</div>
    <div class="comment-actions">
      <span class="comment-like">点赞({{ comment.likes }})</span>
      <span class="comment-reply" @click="showReply">回复</span>
    </div>
    <div v-if="showReplies" class="replies">
      <comment
        v-for="reply in comment.replies"
        :key="reply.id"
        :comment="reply"
      ></comment>
      <textarea v-model="newReply" placeholder="写下你的回复..."></textarea>
      <button @click="addReply">回复</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    comment: Object
  },
  data() {
    return {
      showReplies: false,
      newReply: ''
    };
  },
  methods: {
    showReply() {
      this.showReplies = !this.showReplies;
    },
    addReply() {
      if (this.newReply.trim() !== '') {
        this.comment.replies.push({
          id: Date.now(),
          author: '匿名',
          content: this.newReply,
          time: new Date().toLocaleString(),
          likes: 0
        });
        this.newReply = '';
        this.showReplies = false;
      }
    }
  }
};
</script>

<style scoped>
/* 在这里添加CSS样式 */
</style>

2. 使用组件

<template>
  <div class="comments">
    <comment
      v-for="comment in comments"
      :key="comment.id"
      :comment="comment"
    ></comment>
  </div>
</template>

<script>
import Comment from './Comment.vue';

export default {
  components: {
    Comment
  },
  data() {
    return {
      comments: [
        // ...评论数据
      ]
    };
  }
};
</script>

结论