<!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