VUE:在VUE中实现效果换一换功能

实现效果&＃xff1a;假如有10条数据&＃xff0c;分组展示&＃xff0c;默认在当前页面展示4个&＃xff0c;点击换一批&＃xff0c;从第5个开始继续展示&＃xff0c;到最后一组&＃xff0c;再重新返回到第一组

data() {return {qList: [],//处理后的listnewList: [],//截取第几组的开始参数timeStart: 0,//截取第几组的结束参数timeEnd: 1,//默认为0组group: 0,//一页展示list数量num: 3,//点击的次数clickNum: 0};},​

// 换一批change() {if (this.qList.length > 4 && this.qList.length > this.num) {//点击的时候获取分为几组this.listlen();//每点击一次记录点击次数this.autoIncre();this.clear();this.renderR();}},// 计算数据的长度&＃xff0c;共分为几组&＃xff0c;如果不能整除则加1listlen() {var len &＃61; this.qList.length;this.group &＃61; len / this.num;if (len % this.num !&＃61; 0) {this.group &＃61; parseInt(this.group) &＃43; 1;}},//计算将点击次数和开始截取的参数清空, 如果点击此时大于当前数据的组数&＃xff0c;则重新开始计数。clear() {if (this.clickNum > this.group - 1) {this.timeStart &＃61; 0;this.timeEnd &＃61; 1;this.clickNum &＃61; 0;}},//每点击一次&＃xff0c;记录次数autoIncre() {this.clickNum&＃43;&＃43;;this.timeStart&＃43;&＃43;;this.timeEnd&＃43;&＃43;;},//截取当前每组的数据renderR() {this.newList &＃61; this.qList.slice(this.num * this.timeStart,this.num * this.timeEnd);console.log(this.newList);}},//获取总数据created() {let params &＃61; {keyword: ""};this.$https("get", "/xxx/xxx", params).then(res &＃61;> {var data &＃61; res.data.data;this.qList &＃61; data;this.renderR();}).catch(err &＃61;> {});}