Vuejs实现购物车功能
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
开始更新前端框架Vue.JS的相关博客。
功能概述
学习了Vue.JS的一些基础知识,现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下:
(1)展示商品的名称、单价和数量;
(2)商品的数量可以增加和减少;
(3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变;
(4)商品可以从购物车中移除;
(5)具有选择功能,只计算选中的商品的总价。
上一张截图,如下:
代码
代码分成三部分,分别是HTML、JS、CSS。关键的是HTML和JS。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title >Vue 购物车</ title > < script src = "../js/vue.min.js" ></ script > < link href = "../css/cart.css" rel = "stylesheet" > </ head > < body > < div id = "app" v-cloak> < template v-if = "list.length" > < table > < thead > < tr > < th >< input type = "checkbox" v-on:click = "swapCheck" v-model = "checked" ></ th > < th >商品名称</ th > < th >商品单价</ th > < th >商品数量</ th > < th >操作</ th > </ tr > </ thead > < tbody > < tr v-for = "(item,index) in list" > < td >< input type = "checkbox" v-model = "selectList" :id = "item.id" :value = "index" name = "selectList" ></ td > < td >{{ item.name }}</ td > < td >{{ item.price }}</ td > < td > < button @ click = "handleReduce(index)" :disabled = "item.count === 1" >-</ button > {{ item.count }} < button @ click = "handleAdd(index)" >+</ button > </ td > < td >< button @ click = "handleRemove(index)" >移除</ button ></ td > </ tr > </ tbody > </ table > < div >总价:¥ {{ totalPrice }}</ div > </ template > < div v-else>购物车为空!</ div > </ div > < script src = "../js/cart.js" ></ script > </ body > </ html > |
JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | var app = new Vue({ el: '#app' , data:{ list:[ { id:1, name: 'iPhone 8' , price:8888, count:1 }, { id:2, name: 'Huwei Mate10' , price:6666, count:1 }, { id:3, name: 'Lenovo' , price:6588, count:1 } ], selectList:[], checked: false }, computed:{ totalPrice: function (){ var total = 0; for ( var i = 0,len = this .selectList.length;i < len;i++){ var index = this .selectList[i]; var item = this .list[index]; if (item){ total += item.price * item.count; } else { continue ; } } return total.toString().replace(/\B(?=(\d{3})+$)/g, ',' ); } }, methods:{ handleReduce: function (index){ var item = this .list[index]; if (item.count < 2){ return ; } item.count--; }, handleAdd: function (index){ var item = this .list[index]; item.count++; }, handleRemove: function (index){ this .list.splice(index,1); }, swapCheck: function (){ var selectList = document.getElementsByName( 'selectList' ); var len = selectList.length; if ( this .checked){ for ( var i = 0;i < len;i++){ var item = selectList[i]; item.checked = false ; } this .checked = false ; this .selectList = []; } else { for (i = 0;i < len;i++){ item = selectList[i]; if (item.checked === false ){ item.checked = true ; this .selectList.push(selectList[i].value); } } this .checked = true ; } } } }); |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | [v-cloak]{ display : none ; } table{ border : 1px solid black ; border-collapse : collapse ; border-spacing : 0 ; empty-cells : show ; } th,td{ padding : 8px 16px ; border : 1px solid black ; text-align : center ; } th{ background-color : gray ; } |
关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
![](http://files.jb51.net/skin/2018/images/jb51ewm.png)
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
vuex中数据持久化插件vuex-persistedstate使用详解
这篇文章主要介绍了vuex中数据持久化插件vuex-persistedstate使用详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-03-03Vue.set() this.$set()引发的视图更新思考及注意事项
this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用。这篇文章主要介绍了Vue.set() this.$set()引发的视图更新思考及注意事项,需要的朋友可以参考下2018-08-08
最新评论