vue实现简单的移动端购物车案例
通过vue实现⼀个简单的移动端购物车案例，包括显⽰商品基本信息，添加商品数量，选择及全选商品，进⾏计算价钱、购买或删除等操作。效果及演⽰如下图
实现步骤
⼀、⾸先将需要⽤到的vue.js⽂件准备，或直接使⽤cdn地址
<script src="cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js"></script>
⼆、然后对页⾯整体进⾏布局和样式完善，主要包括头部、列表项和尾部确认提交
<body>
<div id="app">
<p>购物车</p>
<p>共{{shoppingList.length}}件宝贝</p>
<div class="shoppingMain">
<div class="shoppingItem" v-for="(item,index) in shoppingList"><!--列表项-->
<div class="selectCircle" :class="{checked:item.isSelect}" @click="selectGoods(item)"></div>                    <div class="shoppingImg">
<img :src="item.imgurl" alt="">
</div>
<div class="itemRight">
<p class="title">{{item.title}}</p>
<p>{{lor}}</p>
<div class="numAndMoney">
<p>￥{{}}</p>
<div class="numberControl">
<a class="btn" @click="numDel(item,index)">-</a>
<input type="text" v-model="item.num" readonly="readonly">
<a class="btn" @click="numAdd(item,index)">+</a>
</div>
</div>
</div>
</div>
</div>
<div class="bottomMain">                <!--底部固定栏-->
<div class="selectCircle" :class="{checked:allSelect}" @click="allGoodsSelect"></div>
<span >全选</span>
<button class="bottombtn2" @click="delGoods">删除</button>
<button class="bottombtn1" @click="buyGoods">￥{{sum}} ；结算</button>
</div>
</div>
</body>
/* 样式设置 */
body{
margin: 0;
padding: 0;
background: #e0dada;
}
button{
outline: none;
border-color: transparent;
box-shadow:none;
}
#app{
margin: 0;
padding: 0;
width: 100%;
}
.shoppingMain{
width: 100%;
height: auto;
margin-bottom: 70px;
}
.shoppingItem{
width: 96%;
margin-left: 2%;
margin-bottom: 10px;
background: #fff;
border-radius:5px;
display: flex;
}
}
.selectCircle{
width: 15px;
height: 15px;
border: 1px solid #a7a5a5;                border-radius: 50%;
margin: auto 0px auto 10px;            }
.shoppingImg{
width: 100px;
height: 100px;
padding: 10px;
}
.shoppingImg img{
height: 100%;
width: 100%;
}
.itemRight{
font-size: 10px;
width: 200px;
}
.title{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;                overflow: hidden;
}
.
numAndMoney{
display: flex;
}
input{
width: 40px;
height: 20px;
margin: 10px;
text-align: center;
}
.numberControl{
position: absolute;
right: 30px;
}
.bottomMain{
position: fixed;
width: 100%;
height: auto;
border: 1px #a7a5a5 solid;                bottom: 0;
left: 0;
background: #fff;
display: flex;
padding: 10px;
}
.bottombtn1{
width:auto;
height: 30px;
border: none;
color: #fff;
background-color: #e26411;                border-radius: 25px;
margin: 5px 0 0 20px;
}
.bottombtn2{
width:70px;
height: 30px;
border: none;
color: #fff;
background-color: #cecac7;
background-color: #cecac7;
border-radius: 25px;
margin: 5px 0 0 80px;
}
.checked{
background: #e26411;
border: 1px solid rgba(0, 0, 0, 0)
}
三、对数据进⾏模拟和操作
<script>
var vm = new Vue({                //实例化Vue
el:'#app',
data:{                        //数据
shoppingList:[
{
imgurl:"img/item.jpg",
title:"⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包",                            color:"粉⾊",
money:149,
num:"1",
isSelect:false,
},
{
imgurl:"img/item.jpg",
title:"⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包",                            color:"粉⾊",
money:149,
num:"1",
js购物车结算代码
isSelect:false,
},
{
imgurl:"img/item.jpg",
title:"⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包",                            color:"粉⾊",
money:149,
num:"1",
isSelect:false,
},
{
imgurl:"img/item.jpg",
title:"⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包",                            color:"粉⾊",
money:149,
num:"1",
isSelect:false,
},
{
imgurl:"img/item.jpg",
title:"⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包⼥包",                            color:"粉⾊",
money:149,
num:"1",
isSelect:false,
},
],
allSelect:false,
sum:0
},
methods:{
selectGoods(item){        //商品选择⽅法
item.isSelect = !item.isSelect    //改变选择状态
this.allSelect = false
if(item.isSelect == true){
if(item.isSelect == true){
this.sum = this.sum+(*item.num)
}else{
this.sum = this.*item.num)
}                                //结算处商品总额计算
},
allGoodsSelect(){                    //全选商品⽅法
this.allSelect = !this.allSelect    //改变选择状态
if(this.allSelect == true){
this.sum=0
for(var i=0;i<this.shoppingList.length;i++){
this.shoppingList[i].isSelect = true;
this.sum = this.sum+(this.shoppingList[i].money*this.shoppingList[i].num)
}
}else{
for(var i=0;i<this.shoppingList.length;i++){
this.sum = this.sum-(this.shoppingList[i].money*this.shoppingList[i].num)
this.shoppingList[i].isSelect = false;
}
}                                    //结算处商品总额计算
},
numAdd(item,index){                    //商品数量增加
item.num++
if(item.isSelect == true){
this.sum = this.
}                                    //已选择商品增加数量，需要增加总额
},
numDel(item,index){                        //商品数量减少
item.num--
if(item.isSelect == true){
this.sum =
}                                    //已选择商品减少数量，需要减少总额
if(item.num == 0){
this.shoppingList.splice(index,1)
}                                    //数量减少为0，需要删除对应数据
},
buyGoods(){                              //购买⽅法，这⾥只弹出提⽰所购买商品总额
alert("购买成功，共花费"+this.sum+"元")
},
delGoods(){                              //删除商品⽅法
this.sum = 0;                        //所选商品被删除，总额置0
for(var i=0;i<this.shoppingList.length;i++){
if(this.shoppingList[i].isSelect){
this.shoppingList.splice(i,1)
i--
}
}                                    //对所选商品进⾏删除操作
if(this.allSelect){
this.shoppingList.splice(0,this.shoppingList.length);
this.allSelect = false
}                                    //全选商品后进⾏全部删除
}
}
})
</script>
完整代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">        <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>购物车</title>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。