vue实现翻页功能加高阶函数加购物车
<!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>
购物车：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../js/vue.js"></script> <style> table{ margin: 0px 00px; } </style> </head> <body> <div id="app"> <div v-if="books.length"> <table border="1px"> <tr> <td>书籍名称</td> <td>出版日期</td> <td>价格</td> <td>购买数量</td> <td>操作</td> </tr> <tr v-for=" (m,index) in books" > <td >{{m.name}}</td> <td >{{m.time}}</td> <!-- <td >${{item.price.toFixed(2)}}</td>--> <td> ${{m.price.toFixed(2) }}</td> <td><button @click="subcount(index)">-</button>{{m.count}}<button @click="addcount(index)">+</button></td> <td><button @click="remove(index)">移除</button></td> </tr> </table> <span >总价： {{results}}</span> </div> <span v-else>购物车为空</span> </div> <script> const app =new Vue({ el:'#app', data:{ books:[ {name:'hsux',time:'2016-6',price:556,count:1}, {name:'hsux',time:'2019-6',price:56,count:1}, {name:'hsux',time:'2016-6',price:5,count:1} ], istrue:true, }, methods:{ remove(index){ this.books.splice(index,1); }, //获取没个的下标 subcount(index){ if(this.books[index].count>=2){ return this.books[index].count--; } }, addcount(index){ return this.books[index].count++; } }, //局部过滤器 filter:{ showprice(price){ console.log(price); return '$'+price.toFixed(2); } }, computed:{ results(){ /* let resultss=0; for (let i = 0; i < this.books.length; i++) { resultss+=this.books[i].price*this.books[i].count; }*/ return this.books.reduce(function (privalue,book) { return privalue+book.price*book.count; },0) //高阶函数 filter/map/reduce /**filter中的回调函数有一个要求，必须传入一个布尔值 * 但true的时候 ，函数内部会自动将这次的n加入到一个新的数组中 * false 函数会自动过滤这次的值 * */ let num=[12,6,30,650,65,40]; let nums= num.filter(function (n) { return n<100; }) console.log(nums); //map函数的使用 let nums2=nums.map(function (n) { return n*2; }) console.log(nums2); //reduce:对数组中的内容进行汇总的 /** * let nums3= nums2.reduce(function (preValue,n) { return preValue+n; },0)这里的0是初始值 */ let nums3= nums2.reduce(function (preValue,n) { return preValue+n; },0) console.log(nums3); }, } }) </script> </body> </html>
