基于vue怎么写一个简单购物车,代码是什�
Admin 2022-06-28 群英技术资�
本文实例为大家分享了Vue实现简单购物车的具体代码,供大家参考,具体内容如下
HTML首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/css/index.css" > </head> <body> <div id="app"> <div v-if="books.length != 0"> <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}}</td> <td> <button @click="decrement(index)" :disabled="item.count <= 1">-</button> {{item.count}} <button @click="increment(index)">+</button> </td> <td><button @click="removeHandle(index)">移除</button></td> </tr> </tbody> </table> <h2>总价格为:{{totalPrice | showPrice}}</h2> </div> <h2 v-else>购物车为�</h2> </div> <script src="/js/vue.js"></script> <script src="/js/index.js"></script> </body> </html>
css代码
* { margin: 0; padding: 0; } table { margin: 100px 0 0 100px; border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th, td { padding: 8px 16px; border: 1px solid #e9e9e9; text-align: left; } th { background-color: #f7f7f7; color: black; font-weight: 6000 ; } h2 { width: 500px; margin-left: 100px; } button { padding: 5px; }
js代码(Vue�
const app = new Vue({ el:"#app", data:{ books:[ { id:1, name:'《算法导论�', date:'2019-2', price:85.00, count:1 }, { id:2, name:'《计算机基础�', date:'2019-2', price:95.00, count:1 }, { id:3, name:'《c++高级语言�', date:'2019-2', price:89.00, count:1 }, { id:4, name:'《编译原理�', date:'2019-2', price:77.00, count:1 }, ] }, methods:{ decrement(index){ this.books[index].count-- }, increment(index){ this.books[index].count++ }, removeHandle(index){ this.books.splice(index,1) } }, computed:{ totalPrice(){ let finalPrice = 0 for(let i = 0; i < this.books.length; i++){ finalPrice += this.books[i].price * this.books[i].count } return finalPrice } }, filters:{ showPrice(price){ return '�' + price.toFixed(2) } } })
运行结果
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
文本主要给大家介绍的是关于js中promise用法,有promise的概念、promise的创建、promise的优势等等。小编觉得是比较实用的,因此分享给大家作参考�
本篇文章给大家分�5个使� promise 时的常见错误,帮大家快速避坑,希望对大家有所帮助�
如何进行Node扩展开发?下面本篇文章就来介绍一下开发Node.js扩展的前置知识,带你入门Node.js扩展开发,希望对大家有所帮助�
TypeScript引入了很多静态编译语言的特性,今天有一个类型需要着重讨论下,这就是enum,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要为大家详细介绍了JavaScript实现弹性导航效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078