开发小程序资质_vue完成的仿淘宝购物车功用详解

vue实现的仿淘宝购物车功能详解       这篇文章主要介绍了vue实现的仿淘宝购物车功能,结合完整实例形式较为详细的分析了vue.js仿淘宝购物车功能的具体样式、功能相关实现技巧与操作注意事项,需要的朋友可以参考下

本文实例讲述了vue实现的仿淘宝购物车功能。分享给大家供大家参考，具体如下：

下面是一张众所周知的淘宝购物车页面，今天要讲解的案例就是用vue.js做一个类似的页面

首先简单介绍一下可能会用到的一些vue.js的用法：

v-bind，绑定属性；例如v-bind:class="{'class1':flag}"，这是常用的绑定样式的方法，如果flag为true则 "image",image就是图像的路径;

v-if="flag"与v-show="flag"，如果flag为true，则绑定的为“可见”，不同的是v-show是一开始就渲染在DOM中的，改变的则是它的display而已，而v-if为false则是从HTML代码中移除；

v-on，样式绑定v-on:click="dosomething()"="dosomething()"，点击触发dosomething函数；

v-for循环，v-for="item in items"，items为数组，item为items数组的值而不是索引；

要注意的是当this作用域的改变：当this作用域改变是我们设置var self = this，在之后的使用中用self代替；

下面是HTML代码：

 html 
 head 
 title 购物车 /title 
 meta http-equiv="Content-Type" content="text/html; charset=UTF-8" 
 link rel="stylesheet" type="text/css" href="shop.css" rel="external nofollow" 
 /head 
 body 
 div id="app" 
 div span 商品 /span span 单价 /span span 数量 /span span 总价 /span /div 
 div v-for="item in goods" 
 div v-show="item.selected" 
 span v-bind:class="{'checked':item.checked}" @click="check(item)" /span 
 div img v-bind:src="item.image" v-bind:alt="item.alt" / span {{item.name}} /span /div 
 span {{item.price}}元 /span 
 div 
 span v-on:click="changeNum(item,-1)" a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" - /a /span 
 input v-model="item.number" disabled/ 
 span v-on:click="changeNum(item,1)" a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" + /a /span 
 /div 
 div ￥{{item.price * item.number}}元 /div 
 span @click="seen=true" /span 
 /div 
 /div 
 !--footer-- 
 div id="footer" 
 span v-bind:class="{'checked':checkAllFlag}" /span 
 a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="checkAll(true)" 全选 /a 
 a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="checkAll(false)" 取消全选 /a 
 span Total:￥{{totalAll}}元 /span 
 span button 结 nbsp;算 /button /span 
 /div 
 div id="info" v-show="seen" 
 p 是否删除该商品 /p div @click="seen=false" times /div 
 button @click="" yes /button button @click="seen=false" no /button 
 /div 
 div v-show="seen" /div 
 /div 
 /body 
 script src="./src/vue.min.js" /script 
 script src="./src/vue-resource.min.js" /script 
 script src="shop.js" /script 
 /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.js程序设计有所帮助。