傳統(tǒng)的用html+jquery來實現(xiàn)購物車系統(tǒng)要非常的復雜，但是購物車系統(tǒng)完全是一個數(shù)據(jù)驅動的系統(tǒng)，因此采用諸如Vue.js、angular.js這些框架要簡單的多陨仅。餓了嗎開源的組件庫Element是基于Vue.js 2.0實現(xiàn)的，該組件庫封裝了開發(fā)中需要的各種組件铝侵，并且提供了友好的API文檔供開發(fā)者查看灼伤，下面就是我用Element實現(xiàn)的一個簡單的購物車系統(tǒng)。（https://github.com/iwideal/MyGit/tree/master/HTML/shopping-cart）
首先咪鲜，我們用Vue.js推薦的命令行工具來搭建項目骨架狐赡。
# 創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack shopping-cart
# 安裝依賴，走你
$ cd shopping-cart
$ npm install
$ npm run dev
這時候疟丙，生成的項目骨架如圖：
這時候颖侄，我們要像maven一樣，給項目添加依賴享郊，在package.json文件中添加Element依賴：
"dependencies": { "element-ui": "^1.1.6", "vue": "^2.1.0" },
添加完依賴之后览祖，這是我們可以在項目中使用依賴了，在main.js文件中炊琉，導入ElementUI：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
Vue.use(ElementUI)
/* eslint-disable no-new */
new Vue({ el: '#app', template: '<App/>', components: { App }})
重新安裝依賴：
$ cd shopping-cart
$ npm install
$ npm run dev
這時展蒂，我們在App.vue中，寫入我們的購物車代碼。
預覽一下锰悼，整體效果如下：
一柳骄、創(chuàng)建購物車骨架，即復雜型的表格松捉。我們這時可以從Element的官網(wǎng)（http://element.eleme.io/#/zh-CN/component/table）copy過來模板夹界，我們選擇帶有checkbox的表格：
<template>
<div>
<el-table :data="tableData" border style="width: 100%" @selection-change="selected">
<el-table-column type="selection" width="50"> </el-table-column>
<el-table-column label="商品名稱" width="680">
<template scope="scope">
<div style="margin-left: 50px">
<span style="font-size: 18px;padding-left: 200px;">{{scope.row.goods.descript}}</span>
</div>
</template>
</el-table-column>
<el-table-column label="單價" width="150" prop="price"> </el-table-column>
<el-table-column label="數(shù)量" width="200">
<template scope="scope">
<div>
<el-input v-model="scope.row.number" @change="handleInput(scope.row)">
<el-button slot="prepend" @click="del(scope.row)">
<i class="el-icon-minus"></i>
</el-button>
<el-button slot="append" @click="add(scope.row)">
<i class="el-icon-plus"></i>
</el-button>
</el-input>
</div>
</template>
</el-table-column>
<el-table-column label="小計" width="150" prop="goodTotal"> </el-table-column>
<el-table-column label="操作">
<template scope="scope">
<el-button type="danger" @click="handleDelete(scope.$index, scope.row)"> 刪除
<i class="el-icon-delete2 el-icon--right"></i>
</el-button>
</template>
</el-table-column>
</el-table> <br>
<el-button type="info" style="float: right">{{"商品總額：" + moneyTotal}}</el-button>
</div>
</template>
購物車骨架搭建好之后，我們就可以向里面插入數(shù)據(jù)了：
data() {
return {
tableData: [
{
goods:{
img:'http://i1.mifile.cn/a1/pms_1474859997.10825620!80x80.jpg',
descript:'小米手環(huán)2',
},
price:149,
number:1,
goodTotal:149,
},
{
goods:{
img:'http://i1.mifile.cn/a1/pms_1482321199.12589253!80x80.jpg',
descript:'小米活塞耳機 清新版 黑色',
},
price:29,
number:1,
goodTotal:29,
},
{
goods:{
img:'http://i1.mifile.cn/a1/pms_1468288696.74437986!80x80.jpg',
descript:'米家LED隨身燈 增強版 藍色', },
price:14.9,
number:1,
goodTotal:14.9,
},
{
goods:{
img:'http://i1.mifile.cn/a1/pms_1476688193.46995320.jpg?width=140&height=140',
descript:'10000mAh小米移動電源2 銀色',
},
price:79,
number:1,
goodTotal:79,
}
],
moneyTotal:0,
multipleSelection:[],
}
}
這時候隘世，我們需要對購物車中的各種事件做處理，包括刪除商品鸠踪、增加（減少）商品數(shù)量丙者、選中商品等：
methods: {
handleDelete(index, row) {
this.$confirm('確定刪除該商品？', '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//刪除數(shù)組中指定的元素 this.tableData.splice(index,1);
this.$message({ type: 'success', message: '刪除成功!' });
}).catch(() => {
this.$message({ type: 'info', message: '已取消刪除' });
});
},
handleInput:function(value){
if(null==value.number || value.number==""){
value.number=1;
}
value.goodTotal=(value.number*value.price).toFixed(2);
//保留兩位小數(shù) //增加商品數(shù)量也需要重新計算商品總價
this.selected(this.multipleSelection);
},
add:function(addGood){
//輸入框輸入值變化時會變?yōu)樽址袷椒祷氐絡s
//此處要用v-model营密，實現(xiàn)雙向數(shù)據(jù)綁定
if(typeof addGood.number=='string'){
addGood.number=parseInt(addGood.number);
};
addGood.number+=1;
},
del:function(delGood){
if(typeof delGood.number=='string'){
delGood.number=parseInt(delGood.number);
};
if(delGood.number>1){
delGood.number-=1;
}
},
//返回的參數(shù)為選中行對應的對象
selected:function(selection){
this.multipleSelection=selection;
this.moneyTotal=0;
//此處不支持forEach循環(huán)械媒，只能用原始方法了
for(var i=0;i<selection.length;i++){
//判斷返回的值是否是字符串
if(typeof selection[i].goodTotal=='string'){
selection[i].goodTotal=parseInt(selection[i].goodTotal);
};
this.moneyTotal+=selection[i].goodTotal;
}
},
