小编给大家分享一下vue怎么实现的仿淘宝购物车功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
站在用户的角度思考问题,与客户深入沟通,找到普宁网站设计与普宁网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计制作、网站制作、企业官网、英文网站、手机端网站、网站推广、空间域名、虚拟空间、企业邮箱。业务覆盖普宁地区。Vue的优点Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
具体如下:
下面是一张众所周知的淘宝购物车页面,今天要讲解的案例就是用vue.js做一个类似的页面
首先简单介绍一下可能会用到的一些vue.js的用法:
v-bind,绑定属性;例如v-bind:class="{'class1':flag}",这是常用的绑定样式的方法,如果flag为true则class=class1;v-bind:src="image",image就是图像的路径;
v-if="flag"与v-show="flag",如果flag为true,则绑定的为“可见”,不同的是v-show是一开始就渲染在DOM中的,改变的则是它的display而已,而v-if为false则是从HTML代码中移除;
v-on:或@,样式绑定v-on:click="dosomething()"或者@click="dosomething()",点击触发dosomething函数;
v-for循环,v-for="item in items",items为数组,item为items数组的值而不是索引;
要注意的是当this作用域的改变:当this作用域改变是我们设置var self = this,在之后的使用中用self代替;
下面是HTML代码:
购物车
下面的是js的代码:
var vm = new Vue({ el:'#app', data:{ total: 0, totalAll: 0, goods: [],//商品为数组 checkAllFlag: false, seen: false, delFlag: true }, mounted: function () { this.goodlist(); }, methods:{ //改变商品数量 changeNum:function (item,flag) { if (flag>0) { item.number++; }else{ item.number--; if(item.number<1){ item.number = 1; } } this.totalMoney(); }, //是否选中 check:function (item) { if(typeof item.checked == 'undefined'){ this.$set(item,"checked",true); //局部为item添加“checked”,值为true }else{ item.checked = !item.checked; } this.totalMoney(); }, //通过$http.get方法ajax地交互获取商品信息,一定要引入vue-resource组件 goodlist:function () { var self = this; this.$http.get("shop.json").then(function (res) { self.goods = res.data.result.goods; },function () { console.log("failed"); }); }, //是否全选 checkAll:function (flag) { this.checkAllFlag = flag; var self = this; this.goods.forEach(function(value,index){ if(typeof value.checked == 'undefined'){ self.$set(value,"checked",self.checkAllFlag); }else{ value.checked = self.checkAllFlag; } }); this.totalMoney(); }, //结算选中商品的价格 totalMoney:function () { //初始化总价 this.totalAll = 0; var self =this; //通过foreach循环判断是否被选中 this.goods.forEach(function(value,index){ if(value.checked){ self.totalAll += value.price * value.number; } }); } } })
下面是CSS代码:
*{padding: 0;margin: 0;} a{text-decoration: none;color: black;} #app{width: 500px;height: 600px;border: 1px solid;position: absolute;margin-top:20px;margin-left:50px;} .header{width: 500px;height: 30px;line-height: 30px;background-color: darkmagenta;} .header span{display: inline-block;width: 50px;height: 30px;} .show{width: 500px;height: 85px;margin-top: 5px;} #footer{position: absolute;bottom: 0;width: 500px;height: 50px;background-color: #c7c7c9;} .output{width: 40px;height: 20px;} .image{width: 60px;height: 80px;float:left;} .choice{display: inline-block;width: 15px;height: 15px;border-radius: 15px;border: 1px solid;float: left;margin-top: 30px;margin-left: 20px;} .checked{background-color: darkorange;} .icon{background-image: url(del.png);display: inline-block;width: 30px;height: 30px;margin-left: 50px;margin-top: 20px;} .text{display:inline-block;width:50px;height:20px;line-height:20px;font:12px;margin-top:20px;margin-left:5px;float:left;} .count{width:100px;height:40px;background-color:red;line-height:40px;font-size:16px;margin-left:40px;margin-top:5px;} #footer a{display:inline-block;margin-left:5px;height:22px;} #info{width:250px;height:100px;position:absolute;border:1px solid;margin-top:-250px;margin-left:120px;background-color:#c7c7c9;text-align:center;z-index:999;} .get{width:80px;height:30px;font:17px;margin-top:10px;} .shadow{width:100%;height:100%;background-color:black;opacity:0.8;margin-top:-480px;z-index:1;} .close{position:absolute;right:2px;top:-5px;cursor:pointer;}
下面是json代码:
{ "status":1, "result":{ "total":50, "goods":[ { "name":"香烟", "price":15, "number":1, "selected": true, "image": "./img/xiangyan.jpg", "alt": "香烟" }, { "name": "啤酒", "price": 12, "number": 1, "selected": true, "image": "./img/pjiu.jpg", "alt": "啤酒" }, { "name": "打火机", "price": 2, "number": 1, "selected": true, "image": "./img/fire.jpg", "alt": "打火机" }, { "name": "鸡腿", "price": 5, "number": 1, "selected": true, "image": "./img/chick.jpg", "alt": "鸡腿" }, { "name": "垃圾袋", "price": 8, "number": 1, "selected": true, "image": "./img/bush.jpg", "alt": "垃圾袋" } ] }, "message":"" }
实现的结果如下图:
以上是“vue怎么实现的仿淘宝购物车功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!