当前位置：首页 > VUE

vue实现发表评论

2026-03-28 18:06:57VUE

实现发表评论功能

在Vue中实现发表评论功能需要结合前端表单和后端API交互。以下是核心实现步骤：

数据绑定与表单结构

使用v-model绑定评论内容和用户信息：

<template>
  <div class="comment-box">
    <textarea v-model="newComment.content" placeholder="输入评论内容"></textarea>
    <input v-model="newComment.author" placeholder="你的昵称">
    <button @click="submitComment">发表评论</button>
  </div>
</template>

数据初始化

在Vue组件的data中初始化评论数据：

data() {
  return {
    newComment: {
      content: '',
      author: '',
      timestamp: null
    },
    comments: [] // 存储已有评论
  }
}

提交方法实现

实现评论提交逻辑，包含表单验证和API请求：

methods: {
  submitComment() {
    if (!this.newComment.content.trim()) {
      alert('评论内容不能为空');
      return;
    }

    this.newComment.timestamp = new Date().toISOString();

    // 实际项目中这里替换为API请求
    this.comments.unshift({...this.newComment});

    // 重置表单
    this.newComment = { 
      content: '', 
      author: '',
      timestamp: null 
    };
  }
}

评论列表展示

渲染已提交的评论列表：

<ul class="comment-list">
  <li v-for="(comment, index) in comments" :key="index">
    <h4>{{ comment.author || '匿名用户' }}</h4>
    <p>{{ comment.content }}</p>
    <time>{{ formatDate(comment.timestamp) }}</time>
  </li>
</ul>

日期格式化方法

添加日期格式化工具方法：

methods: {
  formatDate(timestamp) {
    return new Date(timestamp).toLocaleString();
  }
}

样式处理

添加基础样式增强用户体验：

.comment-box {
  margin: 20px 0;
}
textarea {
  width: 100%;
  height: 80px;
  margin-bottom: 10px;
}
.comment-list {
  margin-top: 30px;
  list-style: none;
  padding: 0;
}
.comment-list li {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}