- 资讯首页 > 开发技术 > web开发 > JavaScript >
- Vue.js框架实现购物车功能
本文实例为大家分享了Vue.js框架实现购物车的具体代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/vue.min.js"></script> </head> <body> <div id="app" style="position: relative;left: 30%"> <table cellpadding="10"> <thead> <th><input type="checkbox" v-model="cb" v-on:click="allSelect">全选</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> <th>操作</th> </thead> <tbody> <tr v-for="x in info"> <td><input type="checkbox" v-model="x.bol" v-on:click="sign()"></td> <td>{{x.name}}</td> <td>{{x.price}}</td> <td><input type="number" v-model="x.num" min="0" style="width: 50px;text-align: center" v-on:click="count(x)" v-on:change="count(x)"></td> <td>{{x.total}}</td> <td><button v-on:click="del(x)">删除</button></td> </tr> </tbody> </table> <Br> <p>总金额:{{all}}</p> </div> <script> var vm = new Vue({ el: "#app", data: { all: 0, cb: false, info: [{ bol: false, name: "iphone7", price: 6000, num: 1, total: 6000 }, { bol: false, name: "荣耀6x", price: 1200, num: 1, total: 1200 }, { bol: false, name: "dell笔记本", price: 4000, num: 1, total: 4000 }] }, methods: { //计算单价 count: function(obj) { for(var i = 0; i < this.info.length; i++) { // if(this.info[i] == obj) { this.info[i].total = obj.price * obj.num; } //如果被选中了,就计算总价格 if(obj.bol) { this.allSelect(); } } }, //删除 del: function(obj) { this.info.splice(this.info.indexOf(obj), 1) this.allCount(); }, //单选 sign: function() { this.allCount(); }, //全选 allSelect: function() { for(var i = 0; i < this.info.length; i++) { this.info[i].bol = this.cb; } this.allCount(); }, //计算总价 allCount: function() { //每次计算总价都要清空 this.all = 0; for(var i = 0; i < this.info.length; i++) { //计算被选中的商品 if(this.info[i].bol) { this.all += this.info[i].total; } } } } }) </script> </body> </html>
效果图:
更多文章可以点击《》学习阅读。
关于vue.js组件的教程,请大家点击专题进行学习。
更多vue学习教程请阅读专题
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
免责声明:本站发布的内容(图片、视频和文字)以原创、来自本网站内容采集于网络互联网转载等其它媒体和分享为主,内容观点不代表本网站立场,如侵犯了原作者的版权,请告知一经查实,将立刻删除涉嫌侵权内容,联系我们QQ:712375056,同时欢迎投稿传递力量。
Copyright © 2009-2022 56dr.com. All Rights Reserved. 特网科技 特网云 版权所有 特网科技 粤ICP备16109289号
域名注册服务机构:阿里云计算有限公司(万网) 域名服务机构:烟台帝思普网络科技有限公司(DNSPod) CDN服务:阿里云计算有限公司 百度云 中国互联网举报中心 增值电信业务经营许可证B2
建议您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流浏览器浏览本网站