vue写一个帖子评论功能
时间: 2023-07-13 15:32:22 浏览: 66
好的,我可以给您提供一个简单的帖子评论功能的示例代码。
首先,在Vue中创建一个评论组件,代码如下:
```
<template>
<div>
<h2>评论</h2>
<form @submit.prevent="submitComment">
<textarea v-model="commentText"></textarea>
<button type="submit">提交</button>
</form>
<ul>
<li v-for="comment in comments" :key="comment.id">
<p>{{ comment.text }}</p>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
commentText: '',
comments: [],
commentId: 1
};
},
methods: {
submitComment() {
const comment = {
id: this.commentId,
text: this.commentText
};
this.comments.push(comment);
this.commentId++;
this.commentText = '';
}
}
};
</script>
```
在这个组件中,我们有一个文本框和一个提交按钮,用户可以在文本框中输入评论,并点击提交按钮将其添加到评论列表中。`comments`数组用于存储所有的评论,`commentId`用于给每个评论分配一个唯一的ID。
现在,我们需要在我们的应用程序中使用这个组件。假设我们有一个名为`Post`的组件,它显示帖子的内容。我们可以在这个组件中包含我们的评论组件,并将帖子的ID传递给它,这样我们可以将评论与帖子关联起来。代码如下:
```
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.content }}</p>
<comment :postId="post.id"></comment>
</div>
</template>
<script>
import Comment from './Comment.vue';
export default {
components: {
Comment
},
props: ['post']
};
</script>
```
在这个`Post`组件中,我们引入了`Comment`组件,并将帖子的ID作为属性传递给它。现在,我们需要在我们的应用程序中管理所有的帖子和评论。我们可以创建一个名为`App`的组件,并将所有的帖子和评论存储在一个名为`data`的对象中。代码如下:
```
<template>
<div>
<post v-for="post in posts" :key="post.id" :post="post"></post>
</div>
</template>
<script>
import Post from './Post.vue';
export default {
components: {
Post
},
data() {
return {
posts: [
{
id: 1,
title: '第一篇帖子',
content: '这是我的第一篇帖子。'
},
{
id: 2,
title: '第二篇帖子',
content: '这是我的第二篇帖子。'
}
],
comments: []
};
}
};
</script>
```
在这个`App`组件中,我们引入了`Post`组件,并将所有的帖子存储在`posts`数组中。我们还创建了一个空的`comments`数组,用于存储所有的评论。
现在我们已经有了一个可以添加评论的帖子评论系统。当用户在评论框中输入评论并点击提交按钮时,该评论将被添加到评论列表中,并与相应的帖子相关联。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)