当前位置：首页 > VUE

vue 实现评论

2026-02-09 22:39:28VUE

Vue 实现评论功能

数据准备

在 Vue 组件中定义评论数据模型，通常包括评论内容、用户信息和时间戳。使用数组存储多条评论，并初始化空字符串用于输入框绑定。

data() {
  return {
    comments: [
      { id: 1, user: '用户A', content: '第一条评论', time: '2023-01-01' },
      { id: 2, user: '用户B', content: '第二条评论', time: '2023-01-02' }
    ],
    newComment: ''
  }
}

模板结构

创建评论列表和评论表单的模板。使用 v-for 渲染评论列表，v-model 绑定输入框数据。

<div class="comment-section">
  <ul>
    <li v-for="comment in comments" :key="comment.id">
      <strong>{{ comment.user }}</strong>
      <p>{{ comment.content }}</p>
      <span>{{ comment.time }}</span>
    </li>
  </ul>

  <div class="comment-form">
    <textarea v-model="newComment" placeholder="请输入评论"></textarea>
    <button @click="addComment">提交评论</button>
  </div>
</div>

添加评论方法

实现添加评论的逻辑，包括数据验证和时间戳生成。新评论对象被推送到评论数组后清空输入框。

methods: {
  addComment() {
    if (!this.newComment.trim()) return

    const newCommentObj = {
      id: Date.now(),
      user: '当前用户',
      content: this.newComment,
      time: new Date().toLocaleDateString()
    }

    this.comments.push(newCommentObj)
    this.newComment = ''
  }
}

样式优化

为评论区域添加基础样式，改善视觉效果。建议使用 CSS 模块化或预处理器编写样式。

.comment-section {
  max-width: 600px;
  margin: 0 auto;
}

.comment-section ul {
  list-style: none;
  padding: 0;
}

.comment-section li {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

.comment-form textarea {
  width: 100%;
  height: 80px;
  margin: 10px 0;
}

.comment-form button {
  background: #42b983;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}