使用vue实现个人博客的评论功能

本文详细介绍了如何使用Vue.js实现个人博客的评论功能,从获取输入数据、处理提交评论、发送数据到后台,到从后台获取并渲染评论。通过v-model实现双向绑定,提交评论时获取当前文章ID,利用aioxs发送评论数据,以及在Vue的生命周期函数中获取并渲染评论。
摘要由CSDN通过智能技术生成

在说之前先看下效果图,这样方便于理解

样式写的比较丑,希望读者不要太介意,但是功能还是有好好实现的,接下来再看一下代码

这一块的代码是不包含评论在内的代码,对应效果图的评论框。那么实现的过程需要注意的就是

第一步

我们需要获得input中的数据已经textarea中的数据,因此我们需要使用v-model来实现双向绑定,这样一旦输入框的数据发生变     化,我们也能够直接在data中直接拿到这两个数据。
,我们在data中有commenter何comment,就是为了捕捉输入框的变化的。一旦输入框的数据变了,data中的commenter和comment也会相应的改变。

第二步

输入用户名和评论内容后点击提交评论这个按钮可以看到在代码中我绑定了一个submit_comment事件,就是用来触发提交评论的操作的。

  • 6
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值