实现购物车的页面，完成购物车的基本操作 首先实现html代码，将购物车的主体大致构建出来，然后再利用vue进行功能的实现 css代码： 简单的构建出来效果之后，开始进行一些功能的实现 添加功能比较容易实现，只需要简单的绑定个函数，使数量自增，就可以实现具体内容
数量的减少相对会麻烦一点，这时候需要考虑商品的数量不能为负数，并且在购物车中我们一般会考虑商品数量至少为1，如果和增加一样的操作的话，只使数量自减，那么会使商品为负数，所以这里使用了一个**disabled**的属性，当商品数量降为1时，**disabled设置为true**，使得按钮失效，以此来实现具体功能。
del函数不再重复，与自增函数类似，主要是使用了动态绑定disabled的用法，使得按钮失效！ 对于移除功能，我们需要的效果是直接删除该行，那么这个是不难实现的，我们可以利用**splice**来删除该行
产生的问题： 商品总额的话即为商品数量乘以价格，只需要遍历一边即可，不再赘述了，这时候我用了一个过滤器的写法，使得价格会保留两位数字，这种方法比较简洁，便于使用，可以尝试一下
总体思路以及重点代码的解释就说到这里了，实现起来并不算很难，主要是要学会其中解决问题的思路，下面附上完整的代码 test.html style.css main.js 实现效果： 删除第二个商品之后，id跟着改变 商品全部移除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="box" > <table> <thead> <!-- 购物车标头 --> <tr> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item,index) in books"> <!-- 显示购物车内容 --> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.price | showPrice(item.price)}}</td> <td> <button @click="del(index)" :disabled="item.count<=1">-</button> {{item.count}} <button @click="add(index)">+</button> </td> <td> <button @click="move(index)">移除</button> </td> </tr> </tbody> </table> <!-- 商品总价 --> 总价格：{{totalPrice | showPrice}} </div> </div> <script src="../vue.js"></script> <script src="main.js"></script> </body> </html> table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0ch; } th,td{ padding: 10; border: 1px solid #b6b3b3; text-align: center; width: auto; } th{ background-color: #f7f7f7; color: #5c6b77; font-weight: 600; width:100px; } 商品数量的增加与减少
添加
add(index){ // 数量自增 this.books[index].count++; }, 减少
<td> <button @click="del(index)" :disabled="item.count<=1">-</button> {{item.count}} <button @click="add(index)">+</button> </td> 移除功能
move(index){ // 删除操作 this.books.splice(index,1); // 进行删除操作之后，将id修改一下，符合购物车排序 for(let i = 0; i<this.books.length;i++){ this.books[i].id=i+1; }
<div id="box" > <div v-if="books.length"> <table> . . . </table> <!-- 商品总价 --> 总价格：{{totalPrice | showPrice}} </div> <div v-else> <h1>购物车为空</h1> </div> </div> 商品总额
computed: { // 计算总额 totalPrice(){ let totalprice=0 for(let i = 0;i < this.books.length; i++){ totalprice += this.books[i].count*this.books[i].price; } return totalprice; } }, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="box" > <div v-if="books.length"> <table> <thead> <!-- 购物车标头 --> <tr> <th></th> <th>书籍名称</th> <th>出版日期</th> <th>价格</th> <th>购买数量</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(item,index) in books"> <!-- 显示购物车内容 --> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.date}}</td> <td>{{item.price | showPrice(item.price)}}</td> <td> <button @click="del(index)" :disabled="item.count<=1">-</button> {{item.count}} <button @click="add(index)">+</button> </td> <td> <button @click="move(index)">移除</button> </td> </tr> </tbody> </table> <!-- 商品总价 --> 总价格：{{totalPrice | showPrice}} </div> <div v-else> <h1>购物车为空</h1> </div> </div> <script src="../vue.js"></script> <script src="main.js"></script> </body> </html> table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0ch; } th,td{ padding: 10; border: 1px solid #b6b3b3; text-align: center; width: auto; } th{ background-color: #f7f7f7; color: #5c6b77; font-weight: 600; width:100px; } const app = new Vue({ el:"#box", data:{ books:[ { id:1, name:'《算法设计》', date:'2020-6', price:76.00, count:1 }, { id:2, name:'《操作系统》', date:'2020-7', price:109, count:1 }, { id:3, name:'《java程序设计》', date:'2020-2', price:89.00, count:1 }, { id:4, name:'《前端养成计划》', date:'2020-1', price:99.00, count:1 }, ] }, computed: { // 计算总额 totalPrice(){ let totalprice=0 for(let i = 0;i < this.books.length; i++){ totalprice += this.books[i].count*this.books[i].price; } return totalprice; } }, filters:{ showPrice(price){ // 过滤器将价格保留两位数字 return '￥'+price.toFixed(2); } }, methods: { del(index){ // /数量自减 this.books[index].count--; }, add(index){ // 数量自增 this.books[index].count++; }, move(index){ // 删除操作 this.books.splice(index,1); // 进行删除操作之后，将id修改一下，符合购物车排序 for(let i = 0; i<this.books.length;i++){ this.books[i].id=i+1; } } }, })
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
