如何用vue框架写一个简单的购物车功能
Admin 2022-06-14 群英技术资讯 316 次浏览
使用vue写出简单的购物车,供大家参考,具体内容如下
代码:
// An highlighted block <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .cl{ border: 1px solid black; width: 300px; margin: 30px; padding: 15px; } </style> </head> <body> <div id="app"> <div class="cl" v-for="(item,index) in items"> <h4>{{item.sname}}</h4> <button @click="item.sum==0?item.sum==0:item.sum--">-</button> <span>{{item.sum}}</span> <button @click="item.sum++">+</button> <span>{{item.sprice}}元/斤</span> </div> <table> <tr> <th>选择</th> <th>商品名</th> <th>商品数量</th> <th>商品价格</th> </tr> <tr v-for="(item,index) in items"> <td><input type="checkbox" :checked="item.isSelect" @click="item.isSelect=!item.isSelect"></td> <td>{{item.sname}}</td> <td>{{item.sum}}</td> <td>{{item.sprice*item.sum}}</td> </tr> <tr> <td><input type="checkbox" @click="selectProduct(isSelectAll)" :checked="isSelectAll">全选</tf> <td>合计</tf> <td>{{total.totalNum}}</tf> <td>{{total.totalPrice}}</tf> </tr> </table> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ items:[ { 'sname':'苹果', 'sum':1, 'sprice':'10', }, { 'sname':'香蕉', 'sum':1, 'sprice':'12', }, { 'sname':'橘子', 'sum':1, 'sprice':'8', }, ] }, methods:{ selectProduct:function(_isSelect){ for(var i=0 ,len=this.items.length;i<len;i++){ this.items[i].isSelect=!_isSelect; } }, }, computed:{ isSelectAll:function(){ return this.items.every(function(val){return val.isSelect}) }, total:function(){ var prolist = this.items.filter(function(val){return val.isSelect}); totalpri = 0; totalnum = 0; for (var i = 0;i<prolist.length;i++){ totalpri+=prolist[i].sprice*prolist[i].sum; totalnum+=prolist[i].sum } return{totalNum:totalnum,totalPrice:totalpri} } }, mounted:function(){ var _this=this; this.items.map(function(item){ _this.$set(item,'isSelect',false) }) } }) </script> </body> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要为大家详细介绍了微信小程序自定义Modal弹框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
react打包后 路由apache访问404,react项目使用了路由,项目打包后,使用apache服务器访问,能够正常显示,但是刷新后页面404了刷新页面时访问的资源在服务端找不到,因为react-router设置的路径不是真实存
JavaScript实现鼠标移动事件画笔 JavaScript实现鼠标移动事件画笔小游戏,供大家参考,具体内容如下 实现功能 鼠标点击时可以在画板上画画如果鼠标双击那么停止移动进画板颜色改变移除时颜色改变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=" ...
这篇文章给大家分享的是JS中this指向问题,this关键字是JavaScript学习中非常重要的语法点,因此本文就给大家来介绍一下,下文有很详细的介绍,有需要的朋友可以参考,接下来就跟随小编来一起学习一下吧!
element-ui怎样实现响应式导航栏,一些朋友可能会遇到这方面的问题,对此在下文小编向大家来讲解一下,内容详细,易于理解,希望大家阅读完这篇能有收获哦,有需要的朋友就往下看吧!
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008