溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue怎么實現商城購物車功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
vue實現商城購物車功能的具體代碼，具體內容如下
首先，先上最終的效果圖
效果并不是很好看，但是這不是重點。
首先，我們先看下布局：
<template>
<div class="shopcar" id="demo04">
<div class="header-title">
<h4>購物車</h4>
</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="item.img" />
</div>
<div class="car-cont">
<h4>{{item.title}}</h4>
<div class="cat-desc">
<span v-for="spec in item.spec_item">{{spec}}</span>
</div>
</div>
<div class="num">
<span @click="reduce(index)">-</span>
<span>{{item.num}}</span>
<span @click="add(index)">+</span>
</div>
<div class="car-price">
<span class="car-price">￥{{item.price}}</span>
<span class="car-num">X{{item.num}}</span>
</div>
</div>
</li>
</ul>
</div>
<div class="car-footer">
<div class="foot-car">
<label for="foot-check" class="input-label" :class="{active: selected_all}" @click="slect_all"></label>
</div>
<div class="total-cont">
<span>總價：{{totalPrice}}</span>
<span>共{{totalNum}}件</span>
</div>
<div class="btn-box">
<button>立即下單</button>
</div>
</div>
</div>
</template>非常常見的布局，微商城購物車隨處可見，先說明下，在這里，實現選中的功能并不是用傳統的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 h4 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 h4 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用來處理加的操作。當然在真實的開發中，還會有校驗庫存的動作，每次加減都要校驗庫存。數據處理也會更復雜，但是聞琴弦而知雅意，器原理都是相通的。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“vue怎么實現商城購物車功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
