通過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>