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

　　实现效果：假如有10条数据，分组展示，默认在当前页面展示4个，点击换一批，从第5个开始继续展示，到最后一组，再重新返回到第一组
　　data() {     return {       qList: [],       //处理后的list       newList: [],       //截取第几组的开始参数       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();       }     },     // 计算数据的长度，共分为几组，如果不能整除则加1     listlen() {       var len = this.qList.length;       this.group = len / this.num;       if (len % this.num != 0) {         this.group = parseInt(this.group) + 1;       }     },     //计算将点击次数和开始截取的参数清空, 如果点击此时大于当前数据的组数，则重新开始计数。     clear() {       if (this.clickNum > this.group - 1) {         this.timeStart = 0;         this.timeEnd = 1;         this.clickNum = 0;       }     },     //每点击一次，记录次数     autoIncre() {       this.clickNum++;       this.timeStart++;       this.timeEnd++;     },     //截取当前每组的数据     renderR() {       this.newList = this.qList.slice(         this.num * this.timeStart,         this.num * this.timeEnd       );       console.log(this.newList);     }   },    //获取总数据   created() {     let params = {       keyword: ＂＂     };     this.$https(＂get＂, ＂/xxx/xxx＂, params)       .then(res => {         var data = res.data.data;         this.qList = data;         this.renderR();       })       .catch(err => {                });   }