vue.js遍历数据,并向下加载更多。
<template v-for="ms,pidx in messages"> <div class="m,idx in ms"> <div class="date-span"> <span>{{m.a }}</span><span>{{m.b }}</span></div> <div class="jpkcD1"> <div style="margin-bottom: 10px;"> <span @click="updateC(pidx,idx,m.id,m.c)">{{m.c }}</span> <!-- 点击修改c的值 --> </div> </div> </div> </template> <div class="nono" id="" style="margin-bottom:10px;"> <span v-if="show">暂无更多</span> <span v-else @click="getData()">查看更多</span> </div> <script> new Vue({ el: '#app01', data: { messages:[], //定义空数组, page:{"pageNum":0}, //定义初始page对象 show:true }, mounted:function(){ //加载页面时直接执行getDate()获取第1页数据 this.getData(); }, methods:{ getData(){ var self = this //这里先将vue实例的this赋值,ajax方法中的this为windows的。 axios.get("getOrderMessage",{ params: { pageNum:self.page.pageNum+1, //每次获取下一页,当前页码+1 pageSize:5 } }).then(function(response) { self.messages.push(response.data.page.list); self.page = response.data.page; if (self.page.pages != self.page.pageNum){ //判断总页数是否为当前页 self.show = false; }else{ self.show = true; } }) }, updateC(pidx,idx,id,m.c){ var c = "new.c"; this.messages[pidx][idx].c = c; //修改页面遍历后的c的值 axios.post("updateC",{ //ajax修改数据库中c的值 params: { id:id, c:c } }).then(function(response) { // }) } } }) </script>