站长资源网络编程
vue实现商城购物车功能
简介本文实例为大家分享了vue实现商城购物车功能的具体代码，供大家参考，具体内容如下首先，先上最终的效果图效果并不是很好看，但是这不是重点。首先，我们先看下布局：
本文实例为大家分享了vue实现商城购物车功能的具体代码，供大家参考，具体内容如下
首先，先上最终的效果图
效果并不是很好看，但是这不是重点。
首先，我们先看下布局：
<template>
<div class="shopcar" id="demo04">
<div class="header-title">
<h3>购物车</h3>
</div>
<div class="car-list">
<ul>
<li class="car-item" v-for="(item,index) in good_list">
<div class="input-block">
<label class="input-label" :class="{active: item.is_selected}" :for="'car-checkbox-'+index" @click="select_one(index)"></label>
</div>
<div class="car-item-content">
<div class="car-img">
<img :src="/UploadFiles/2021-04-02/item.img">
非常常见的布局，微商城购物车随处可见，先说明下，在这里，实现选中的功能并不是用传统的label+checkbox实现，而是一个单独的label，目的是为了简化dom结构，在传统的jq项目或者zepto项目中，一般会会这样写，主要是为了方便操作demo，但是vue项目完全不用考虑dom的操作，怎么方便怎么来就ok。
在加些简单的样式，
.header-title
height 42px
line-height 42px
background #f5f5f5
border-bottom 1px solid #ddd
.header-title h3
font-weight normal
text-align center
.car-list
background #f2f2f2
margin-top 12px
padding 8px
.car-item
border-bottom 1px solid #ddd
position relative
height 76px
overflow hidden
.car-checkbox
display none
.input-block
width 30px
float left
height 55px
line-height 55px
.input-label
cursor pointer
position absolute
width 18px
height 18px
top 18px
left 0
background #fff
border:2px solid #ccc
border-radius 50%
.input-label:after
opacity 0
content ''
position absolute
width 9px
height 5px
background transparent
top 6px
left 6px
border 2px solid #333
border-top none
border-right none
-webkit-transform rotate(-45deg)
-moz-transform rotate(-45deg)
-o-transform rotate(-45deg)
-ms-transform rotate(-45deg)
transform rotate(-45deg)
.car-img
width 64px
height 64px
float left
overflow hidden
.car-img img
width 100%
.input-label.active
background #F15A24
.car-cont
margin-left 100px
.car-cont h3
font-weight normal
line-height 24px
font-size 14px
.car-price
position absolute
right 12px
bottom 0px
width 40px
height 40px
text-align right
.car-price span
display block
height 24px
line-height 24px
width 100%
.car-footer
height 60px
background #f5f5f5
position fixed
bottom 0
left 0
right 0
.foot-car
width 42px
height 60px
float left
margin-left 12px
position relative
.total-cont
height 60px
line-height 60px
font-size 16px
float left
.total-cont span
display inline-block
margin-left 12px
.btn-box
float right
height 60px
line-height 60px
.btn-box button
height 100%
width: 100px
border none
background #F15A24
color #fff
font-size 16px
.num
position absolute
top 28px
right 25px
width 120px
.num span
display inline-block
width 28px
height 28px
float left
text-align center
line-height 28px
border 1px solid #ddd
font-size 14px
最近在学习stylus的使用，所以，就当做练习了。
接下就是javascript了。
export default {
data () {
return {
good_list: [
{
title: 'Apple iPhone 6s 16GB 玫瑰金色 移动联通电信4G手机',
img: "http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg",
num: 2,
price: 6070.00,
spec_item:[
'内存:16G',
'网络:4G',
'颜色:玫瑰金'
],
is_selected: false
},{
title: 'Apple iPhone 6s 32GB 玫瑰金色 移动联通电信4G手机',
img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
num: 2,
price: 4570.00,
spec_item:[
'内存:32G',
'网络:4G',
'颜色:玫瑰金'
],
is_selected: true
},{
title: 'Apple iPhone 6s 8GB 玫瑰金色 移动联通电信4G手机',
img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
num: 2,
price: 4870.00,
spec_item:[
'内存:8G',
'网络:4G',
'颜色:玫瑰金'
],
is_selected: false
},{
title: 'Apple iPhone 6s 128GB 玫瑰金色 移动联通电信4G手机',
img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
num: 2,
price: 10568.00,
spec_item:[
'内存:128G',
'网络:4G',
'颜色:玫瑰金'
],
is_selected: true
},
],
totalPrice: 0,
totalNum: 0,
selected_all: false
}
},
mounted: function () {
this.getTotal();
},
watch: {
'good_list': {
handler: function (val, oldVal) {
// console.log(val)
return val;
},
deep: true
}
},
methods: {
getTotal () {
this.totalPrice = 0
this.totalNum = 0
for (var i = 0; i < this.good_list.length; i++) {
var _d = this.good_list[i]
if(_d.is_selected){
this.totalPrice += _d['price'] * _d['num']
this.totalNum +=_d['num']
}
}
},
select_one (index) {
if(this.good_list[index].is_selected == true){
this.good_list[index].is_selected = false
}else{
this.good_list[index].is_selected = true
}
this.getTotal()
},
slect_all () {
if(this.selected_all){
for (var i = 0; i < this.good_list.length; i++) {
this.good_list[i].is_selected = false;
}
this.selected_all = false
}else{
for (var i = 0; i < this.good_list.length; i++) {
this.good_list[i].is_selected = true;
}
this.selected_all = true
}
this.getTotal()
},
reduce (index) {
if(this.good_list[index].num <= 1) return;
this.good_list[index].num --
this.getTotal()
},
add (index) {
this.good_list[index].num ++
this.getTotal()
}
}
}
这里用mock数据来代替后台请求数据的动作，为了方便测试，逻辑比较简单，首先getTotal这个方法用来计算选中的item的数量以及总价，select_one用来处理单个选中的逻辑，slect_all 用来处理全部选中以及全部取消选中的操作，reduce用来处理处理减操作，顾名思义add用来处理加的操作。当然在真实的开发中，还会有校验库存的动作，每次加减都要校验库存。数据处理也会更复杂，但是闻琴弦而知雅意，器原理都是相通的。
github地址传送门
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。