首页 > 代码库 > vue教程2-07 微博评论功能
vue教程2-07 微博评论功能
vue教程2-07 微博评论功能
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link href="http://www.mamicode.com/style/weibo.css" rel="stylesheet" type="text/css" /> <style> [v-cloak]{ /*比较大的段落,防止闪烁,看到花括号*/ display: none; } </style> <script src="http://www.mamicode.com/vue.js"></script> <script src="http://www.mamicode.com/vue-resource.js"></script> <script> Vue.filter(‘date‘,function(input){ var oDate=new Date(input*1000); return oDate.getFullYear()+‘-‘+(oDate.getMonth()+1)+‘-‘+oDate.getDate()+‘ ‘+oDate.getHours()+‘:‘+oDate.getMinutes()+‘:‘+oDate.getSeconds(); }); window.onload=function(){ var URL=‘weibo.php‘; new Vue({ el:‘.znsArea‘, data:{ //vue的属性、数据 t1:‘‘, msgData:[] }, methods:{ add:function(){ //发送请求 this.$http({ url:URL, data:{ //后台发送数据 act:‘add‘, content:this.t1 } }).then(function(res){ var json=res.data; //msgData添加数据 this.msgData.unshift({ content:this.t1, time:json.time, acc:0, ref:0, id:json.id }); this.t1=‘‘; }); }, getPageData:function(n){ this.$http({ url:URL, data:{ act:‘get‘, page:n } }).then(function(res){ //console.log(res.data); var arr=res.data; console.log(arr); for(var i=0; i<arr.length; i++){ this.msgData.push({ content:arr[i].content, time:arr[i].time, acc:arr[i].acc, ref:arr[i].ref, id:arr[i].id }); } }); } }, created:function(){ this.getPageData(1); } }); }; </script> </head> <body> <div class="znsArea"> <!--留言--> <div class="takeComment"> <textarea name="textarea" class="takeTextField" id="tijiaoText" v-model="t1"></textarea> <div class="takeSbmComment"> <input type="button" class="inputs" value="" @click="add" /> <span>(可按 Enter 回复)</span> </div> </div> <!--已留--> <div class="commentOn"> <div class="noContent" v-show="msgData.length==0">暂无留言</div> <div class="messList"> <div class="reply" v-for="item in msgData" v-cloak> <p class="replyContent">{{item.content}}</p> <p class="operation"> <span class="replyTime">{{item.time|date}}</span> <span class="handle"> <a href="javascript:;" class="top">{{item.acc}}</a> <a href="javascript:;" class="down_icon">{{item.ref}}</a> <a href="javascript:;" class="cut">删除</a> </span> </p> </div> </div> <div class="page"> <a href="javascript:;" class="active">1</a> <a href="javascript:;">2</a> <a href="javascript:;">3</a> </div> </div> </div> </body> </html>
vue教程2-07 微博评论功能
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。