留言板实现发布功能

最新推荐文章于 2024-06-12 11:13:48 发布

Syyy啊

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量315

点赞数 1

文章标签：前端 vue node.js javascript

本文链接：https://blog.csdn.net/Syyynb/article/details/138677447

版权

要在 Vue 中实现一个基础的留言板发布功能，你需要一个表单来输入留言，一个按钮来提交留言，以及一个列表来显示所有留言。我将提供一个简单的示例，包含基础的 Vue 组件结构和相应的功能。

HTML 部分

首先，需要一个HTML文件来设置基本的结构。如果还没有添加Vue.js库，可以像之前一样通过CDN添加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
</head>
<body>
    <div id="app">
        <h1>留言板</h1>
        <form @submit.prevent="addMessage">
            <input type="text" v-model="newMessage" placeholder="写下你的留言">
            <button type="submit">发布</button>
        </form>
        <ul>
            <li v-for="message in messages" :key="message.id">
                {{ message.text }}
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                newMessage: '',
                messages: [],
                nextMessageId: 1
            },
            methods: {
                addMessage() {
                    if (this.newMessage.trim() !== '') {
                        this.messages.push({
                            id: this.nextMessageId++,
                            text: this.newMessage
                        });
                        this.newMessage = ''; // 清空输入框
                    }
                }
            }
        });
    </script>
</body>
</html>

代码解释

HTML结构：
- 包含一个表单，用于输入留言。这个表单有一个输入框和一个提交按钮。
- 使用 v-model 指令绑定输入框的值到 newMessage 数据属性。
- 表单的 @submit.prevent 是一个事件修饰符，用于阻止表单的默认提交行为，并调用 addMessage 方法。
- 使用 v-for 指令在一个列表中展示所有留言。
JavaScript 部分：
- Vue 实例的 data 包含三个属性：newMessage（当前输入的留言文本），messages（留言列表数组），nextMessageId（为每条留言生成唯一ID）。
- addMessage 方法检查输入的留言是否为空（去除前后空格），如果不为空，就将留言添加到 messages 数组中，并重置 newMessage 为空，准备下一次输入。