通过vue实现一个简单的移动端购物车案例，包括显示商品基本信息，添加商品数量，选择及全选商品，进行计算价钱、购买或删除等操作。效果及演示如下图
实现步骤
一、首先将需要用到的vue.js文件准备，或直接使用cdn地址
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>{{item.color}}</p>
<div class="numAndMoney">
<p>￥{{item.money}}</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 style="padding: 10px">全选</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;
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",
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){
this.sum = this.sum+(item.money*item.num)
}else{
this.sum = this.sum-(item.money*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.sum+item.money
} //已选择商品增加数量，需要增加总额
},
numDel(item,index){ //商品数量减少
item.num--
if(item.isSelect == true){
this.sum = this.sum-item.money
} //已选择商品减少数量，需要减少总额
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>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
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;
border-radius: 25px;
margin: 5px 0 0 80px;
}
.checked{
background: #e26411;
border: 1px solid rgba(0, 0, 0, 0)
}
</style>
</head>
<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>{{item.color}}</p>
<div class="numAndMoney">
<p>￥{{item.money}}</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 style="padding: 10px">全选</span>
<button class="bottombtn2" @click="delGoods">删除</button>
<button class="bottombtn1" @click="buyGoods">￥{{sum}} 结算</button>
</div>
</div>
<script>
var vm = new 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",
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){
this.sum = this.sum+(item.money*item.num)
}else{
this.sum = this.sum-(item.money*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.sum+item.money
}
},
numDel(item,index){
item.num--
if(item.isSelect == true){
this.sum = this.sum-item.money
}
if(item.num == 0){
this.shoppingList.splice(index,1)
}
},
buyGoods(){
alert("购买成功,共花费"+this.sum+"元")
},
delGoods(){
this.sum = 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>
</body>
</html>