留言板实现功能

岐峣-

已于 2024-05-25 09:17:55 修改

阅读量248

点赞数 5

文章标签：前端

于 2024-05-18 18:26:12 首次发布

本文链接：https://blog.csdn.net/iiu777_/article/details/139029506

版权

要在 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>