我用Vue.js实现微信朋友圈的一些功能,实现展示朋友圈,评论,点赞。
先构造一个vue的实例,对会更改的数据进行双向绑定,
我用JSON伪造模版数据,先实现显示朋友圈的效果,使用v-for方法去循环ALLFeeds中的每一项item生成包括name、content、time在内的各项数据。
微信朋友圈实现效果
HTML代码:
实现朋友圈点赞
当like的值变为赞时,向userLike中push一个点赞的username,然后将like的值变为取消。当用户点击取消按钮的时候,将userLike数组中添加的赞pop掉。
实现评论功能
input的val()push到content的值里。
实现评论回复功能
给comment中添加reply的key。由于微信的回复是平铺的所以只要显示谁对谁的回复即可,不需要进行评论的嵌套。所以HTML中使用v-if对comment中是否存在reply进行判断。
对comment中是否存在reply进行判断
遇到的坑:
当异步加载JSON的时候,不能直接获取到JSON的值,因为可能等下面函数加载完后JSON的值还未拿到。所以会出现data数据为undefined的情况。所以需要在JSON的回调函数中进行函数调用。
初始化showComt时,需要用到ready,当DOM加载完后再执行。
收获:
学会了使用v-for、v-if、v-show,v-on:click等vue的方法,vue的构造器,jQuery的Ajax相关的方法。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。