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