当前位置：首页 > VUE

vue组件实现留言功能

2026-01-20 22:08:46VUE

实现留言功能的基本思路

留言功能通常需要前端界面展示留言列表、提交表单，后端处理数据存储和读取。以下基于Vue 3的Composition API实现一个基础版本。

vue组件实现留言功能

创建留言组件结构

新建MessageBoard.vue文件，包含留言列表和提交表单：

vue组件实现留言功能

<template>
  <div class="message-board">
    <div class="message-list">
      <div v-for="message in messages" :key="message.id" class="message-item">
        <strong>{{ message.author }}:</strong>
        <p>{{ message.content }}</p>
        <small>{{ formatDate(message.timestamp) }}</small>
      </div>
    </div>

    <form @submit.prevent="submitMessage">
      <input v-model="newMessage.author" placeholder="Your name" required>
      <textarea v-model="newMessage.content" placeholder="Your message" required></textarea>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

组件逻辑实现

<script>
import { ref } from 'vue';

export default {
  setup() {
    const messages = ref([
      { id: 1, author: 'User1', content: 'First message', timestamp: new Date() }
    ]);

    const newMessage = ref({
      author: '',
      content: ''
    });

    const submitMessage = () => {
      const message = {
        id: Date.now(),
        author: newMessage.value.author,
        content: newMessage.value.content,
        timestamp: new Date()
      };
      messages.value.push(message);
      newMessage.value = { author: '', content: '' };
    };

    const formatDate = (date) => {
      return new Date(date).toLocaleString();
    };

    return {
      messages,
      newMessage,
      submitMessage,
      formatDate
    };
  }
};
</script>

样式设计

<style scoped>
.message-board {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.message-list {
  margin-bottom: 20px;
}

.message-item {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

input, textarea {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

连接后端API（可选）

如需持久化存储，可添加axios请求：

import axios from 'axios';

// 获取留言
const fetchMessages = async () => {
  try {
    const response = await axios.get('/api/messages');
    messages.value = response.data;
  } catch (error) {
    console.error('Error fetching messages:', error);
  }
};

// 提交留言修改submitMessage
const submitMessage = async () => {
  try {
    const response = await axios.post('/api/messages', newMessage.value);
    messages.value.push(response.data);
    newMessage.value = { author: '', content: '' };
  } catch (error) {
    console.error('Error submitting message:', error);
  }
};

// 在setup中调用
onMounted(fetchMessages);