vue教程2-07 微博评论功能
vue教程2-07 微博评论功能<!doctype html><html><head><meta charset="utf-8"><title></title><link href="style/weibo.css" rel="stylesheet" type="text/css" /><style>[v-cloak]{/*比较大的段落，防止闪烁，看到花括号*/display: none;}</style><script src="../vue.js"></script><script src="../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>
