<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/vue.js"></script> </head> <body> <div id="app"> <span v-for="(m,index) in pagePeople"> <div v-if="m.state!=true " @click="m.state=true"> {{index}}-{{m.name}} </div> <div v-if="m.state==true "> <input v-model="m.name"> </div> </br></span> <br> <input v-model="people.name" > <button @click="LastPage">上一页</button> <button @click="nextPage">下一页</button> <span>当前页数： {{page}} </span> <button @click="addpeople">添加</button> </div> <script> /* <!-- 实现翻页功能 js方法： // 1.只保留整数部分（丢弃小数部分） parseInt(5.1234);// 5 // 2.向下取整（<= 该数值的最大整数）和parseInt()一样 Math.floor(5.1234);// 5 // 3.向上取整（有小数，整数就+1） Math.ceil(5.1234); // 4.四舍五入（小数部分） Math.round(5.1234);// 5 Math.round(5.6789);// 6 // 5.绝对值 Math.abs(-1);// 1 // 6.返回两者中的较大值 Math.max(1,2);// 2 // 7.返回两者中的较小值 Math.min(1,2);// 1 // 随机数（0-1） Math.random(); -->*/ new Vue({ el:'#app', data:{ peoples:[], people:{ name:'', state:false, }, page:1, pageSize:2, }, methods:{ addpeople:function () { if(this.people.name=='') return; this.peoples.push({ name:this.people.name, state:false, }); this.people.name=''; }, nextPage:function () { //Math.ceil :向上取整 总长度除以大小 大于当前页数 就++ if(Math.ceil((this.peoples.length/this.pageSize))>this.page) { this.page++; } }, LastPage:function () { if(this.page<=1) return; this.page--; } }, computed:{ pagePeople:function () { let begin=(this.page-1)*this.pageSize; //截取 return this.peoples.slice(begin,this.pageSize+begin); } }, component:{ indexM:function () { } } }) </script> </body> </html>
d