本文实例讲述了vue+php实现的微博留言功能。分享给大家供大家参考，具体如下：
html部分：
<!doctype html><html><head><meta charset="utf-8"><title>微博留言</title><link href="style/weibo.css" rel="external nofollow" rel="stylesheet" type="text/css" /><script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script><script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.js"></script> <style> [v-cloak]{ display: none; } </style> <script> Vue.filter('formatDate',function (date) { var oData = new Date(date*1000) return oData.getFullYear()+'-'+(oData.getMonth()+1)+'-'+oData.getDate()+" "+ oData.getHours()+":"+oData.getMinutes()+":"+oData.getSeconds() }); window.onload = function () { var vm = new Vue({ el:'.znsArea', data:{ userMsg:'', msgDict:[], url:'weibo.php', totalPage :0, nowpage:1 }, methods:{ add:function () { if(this.userMsg=='') return this.$http.get(this.url, { params:{ 'act':'add', 'content':this.userMsg } }).then(function (res) { this.msgDict.unshift({ 'content':this.userMsg, 'time':res.data.time, 'acc':0, 'ref':0, 'id':res.data.id }) this.userMsg = '' }) }, loadData:function (n) { this.$http.get(this.url,{ params:{ 'act':'get', 'page':n } }).then(function (res) { this.msgDict = res.data }) }, pageCount:function () { this.$http.get(this.url,{ params:{ 'act':'get_page_count' } }).then(function (res) { this.totalPage = res.data.count }) }, changePage:function (i) { this.nowpage=i this.loadData(i) }, del:function (did) { this.$http.get(this.url,{ params:{ act:'del', id:did } }).then(function () { for(var delitem in this.msgDict){ if(this.msgDict[delitem].id==did){ this.msgDict.splice(this.msgDict[delitem],1) } } }) this.loadData(this.nowpage) }, acc:function (mid) { this.$http.get(this.url,{ params:{ act:'acc', id:mid } }).then(function () { for(var item in this.msgDict){ if(this.msgDict[item].id==mid){ this.msgDict[item].acc +=1 } } }) }, ref:function (mid) { this.$http.get(this.url,{ params:{ act:'ref', id:mid } }).then(function () { for(var item in this.msgDict){ if(this.msgDict[item].id==mid){ this.msgDict[item].ref +=1 } } }) } }, created:function () { this.loadData(1) this.pageCount() } }) } </script></head><body><div class="znsArea"><!--留言--> <div class="takeComment"> <textarea name="textarea" class="takeTextField" id="tijiaoText" v-model="userMsg" @keydown.enter="add"></textarea> <div class="takeSbmComment"> <input type="button" class="inputs" value="" @click="add" @keydown.enter="add"/> <span>(可按 Enter 回复)</span> </div> </div><!--已留--> <div class="commentOn"> <div class="noContent" v-show="msgDict.length==0">暂无留言</div> <div class="messList"> <div class="reply" v-for="item in msgDict"> <p class="replyContent" v-text="item.content"></p> <p class="operation"> <span class="replyTime" v-cloak>{{item.time|formatDate}}</span> <span class="handle"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="top" v-text="item.acc" @click="acc(item.id)"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down_icon" v-text="item.ref" @click="ref(item.id)"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="cut" @click="del(item.id)">删除</a> </span> </p> </div> </div> <div class="page"> <span v-for="i in totalPage"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="changePage(i)" v-text="i" :class="{active:i==nowpage}"></a> </span> </div> </div></div></body></html>
新闻热点
疑难解答
图片精选
