vue是前端輕量級MVVM框架，入門門檻相對較低，今天用Vue做一個購物車實例，發表以便記錄
原理分析和實現
首先，還是先把布局寫好，和引入vue，准備vue實例，這個不多說，代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.fl{
float: left;
}
.fr{
float: right;
}
blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, img, input, li, ol, p, table, td, textarea, th, ul {
margin: 0;
padding: 0;
}
.clearfix{
zoom: 1;
}
.clearfix:after {
clear: both;
}
.clearfix:after {
content: '.';
display: block;
overflow: hidden;
visibility: hidden;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
a{
text-decoration: none;
color: #333;
}
img{vertical-align: middle;}
.page-shopping-cart {
width: 1200px;
margin: 50px auto;
font-size: 14px;
border: 1px solid #e3e3e3;
border-top: 2px solid #317ee7; }
.page-shopping-cart .cart-title {
color: #317ee7;
font-size: 16px;
text-align: left;
padding-left: 20px;
line-height: 68px; }
.page-shopping-cart .red-text {
color: #e94826; }
.page-shopping-cart .check-span {
display: block;
width: 24px;
height: 20px;
background: url("shopping_cart.png") no-repeat 0 0; }
.page-shopping-cart .check-span.check-true {
background: url("shopping_cart.png") no-repeat 0 -22px; }
.page-shopping-cart .td-check {
width: 70px; }
.page-shopping-cart .td-product {
width: 460px; }
.page-shopping-cart .td-num, .page-shopping-cart .td-price, .page-shopping-cart .td-total {
width: 160px; }
.page-shopping-cart .td-do {
width: 150px; }
.page-shopping-cart .cart-product-title {
text-align: center;
height: 38px;
line-height: 38px;
padding: 0 20px;
background: #f7f7f7;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3; }
.page-shopping-cart .cart-product-title .td-product {
text-align: center;
font-size: 14px; }
.page-shopping-cart .cart-product-title .td-check {
text-align: left; }
.page-shopping-cart .cart-product-title .td-check .check-span {
margin: 9px 6px 0 0; }
.page-shopping-cart .cart-product {
padding: 0 20px;
text-align: center; }
.page-shopping-cart .cart-product table {
width: 100%;
text-align: center;
font-size: 14px; }
.page-shopping-cart .cart-product table td {
padding: 20px 0; }
.page-shopping-cart .cart-product table tr {
border-bottom: 1px dashed #e3e3e3; }
.page-shopping-cart .cart-product table tr:last-child {
border-bottom: none; }
.page-shopping-cart .cart-product table .product-num {
border: 1px solid #e3e3e3;
display: inline-block;
text-align: center; }
.page-shopping-cart .cart-product table .product-num .num-do {
width: 24px;
height: 28px;
display: block;
background: #f7f7f7; }
.page-shopping-cart .cart-product table .product-num .num-reduce span {
background: url("shopping_cart.png") no-repeat -40px -22px;
display: block;
width: 6px;
height: 2px;
margin: 13px auto 0 auto; }
.page-shopping-cart .cart-product table .product-num .num-add span {
background: url("shopping_cart.png") no-repeat -60px -22px;
display: block;
width: 8px;
height: 8px;
margin: 10px auto 0 auto; }
.page-shopping-cart .cart-product table .product-num .num-input {
width: 42px;
height: 28px;
line-height: 28px;
border: none;
text-align: center; }
.page-shopping-cart .cart-product table .td-product {
text-align: left;
font-size: 12px;
line-height: 20px; }
.page-shopping-cart .cart-product table .td-product img {
border: 1px solid #e3e3e3;
margin-right: 10px; }
.page-shopping-cart .cart-product table .td-product .product-info {
display: inline-block;
vertical-align: middle; }
.page-shopping-cart .cart-product table .td-do {
font-size: 12px; }
.page-shopping-cart .cart-product-info {
height: 50px;
line-height: 50px;
background: #f7f7f7;
padding-left: 20px; }
.page-shopping-cart .cart-product-info .delect-product {
color: #666; }
.page-shopping-cart .cart-product-info .delect-product span {
display: inline-block;
vertical-align: top;
margin: 18px 8px 0 0;
width: 13px;
height: 15px;
background: url("shopping_cart.png") no-repeat -60px 0; }
.page-shopping-cart .cart-product-info .product-total {
font-size: 14px;
color: #e94826; }
.page-shopping-cart .cart-product-info .product-total span {
font-size: 20px; }
.page-shopping-cart .cart-product-info .check-num {
color: #333; }
.page-shopping-cart .cart-product-info .check-num span {
color: #e94826; }
.page-shopping-cart .cart-product-info .keep-shopping {
color: #666;
margin-left: 40px; }
.page-shopping-cart .cart-product-info .keep-shopping span {
display: inline-block;
vertical-align: top;
margin: 18px 8px 0 0;
width: 15px;
height: 15px;
background: url("shopping_cart.png") no-repeat -40px 0; }
.page-shopping-cart .cart-product-info .btn-buy {
height: 50px;
color: #fff;
font-size: 20px;
display: block;
width: 110px;
background: #ff7700;
text-align: center;
margin-left: 30px; }
.page-shopping-cart .cart-worder {
padding: 20px; }
.page-shopping-cart .cart-worder .choose-worder {
color: #fff;
display: block;
background: #39e;
width: 140px;
height: 40px;
line-height: 40px;
border-radius: 4px;
text-align: center;
margin-right: 20px; }
.page-shopping-cart .cart-worder .choose-worder span {
display: inline-block;
vertical-align: top;
margin: 9px 10px 0 0;
width: 22px;
height: 22px;
background: url("shopping_cart.png") no-repeat -92px 0; }
.page-shopping-cart .cart-worder .worker-info {
color: #666; }
.page-shopping-cart .cart-worder .worker-info img {
border-radius: 100%;
margin-right: 10px; }
.page-shopping-cart .cart-worder .worker-info span {
color: #000; }
.choose-worker-box {
width: 620px;
background: #fff; }
.choose-worker-box .box-title {
height: 40px;
line-height: 40px;
background: #F7F7F7;
text-align: center;
position: relative;
font-size: 14px; }
.choose-worker-box .box-title a {
display: block;
position: absolute;
top: 15px;
right: 16px;
width: 10px;
height: 10px;
background: url("shopping_cart.png") no-repeat -80px 0; }
.choose-worker-box .box-title a:hover {
background: url("shopping_cart.png") no-repeat -80px -22px; }
.choose-worker-box .worker-list {
padding-top: 30px;
height: 134px;
overflow-y: auto; }
.choose-worker-box .worker-list li {
float: left;
width: 25%;
text-align: center;
margin-bottom: 30px; }
.choose-worker-box .worker-list li p {
margin-top: 8px; }
.choose-worker-box .worker-list li.cur a {
color: #f70; }
.choose-worker-box .worker-list li.cur a img {
border: 1px solid #f70; }
.choose-worker-box .worker-list li a:hover {
color: #f70; }
.choose-worker-box .worker-list li a:hover img {
border: 1px solid #f70; }
.choose-worker-box .worker-list li img {
border: 1px solid #fff;
border-radius: 100%; }
</style>
</head>
<body>
<div class="page-shopping-cart" id="shopping-cart">
<h4 class="cart-title">購物清單</h4>
<div class="cart-product-title clearfix">
<div class="td-check fl"><span class="check-span fl check-all"></span>全選</div>
<div class="td-product fl">商品</div>
<div class="td-num fl">數量</div>
<div class="td-price fl">單價(元)</div>
<div class="td-total fl">金額(元)</div>
<div class="td-do fl">操作</div>
</div>
<div class="cart-product clearfix">
<table>
<tbody><tr>
<td class="td-check"><span class="check-span"></span></td>
<td class="td-product"><img src="testimg.jpg" width="98" height="98">
<div class="product-info">
<h6>【斯文】甘油 | 丙三醇</h6>
<p>品牌：韓國skc 產地：韓國</p>
<p>規格/純度:99.7% 起定量：215千克</p>
<p>配送倉儲：上海倉海倉儲</p>
</div>
<div class="clearfix"></div>
</td>
<td class="td-num">
<div class="product-num">
<a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
<input type="text" class="num-input" value="3">
<a href="javascript:;" class="num-add num-do fr"><span></span></a>
</div>
</td>
<td class="td-price">
<p class="red-text">￥<span class="price-text">800</span>.00</p>
</td>
<td class="td-total">
<p class="red-text">￥<span class="total-text">800</span>.00</p>
</td>
<td class="td-do"><a href="javascript:;" class="product-delect">刪除</a></td>
</tr>
<tr>
<td class="td-check"><span class="check-span check-true"></span></td>
<td class="td-product"><img src="testimg.jpg" width="98" height="98">
<div class="product-info">
<h6>【斯文】甘油 | 丙三醇</h6>
<p>品牌：韓國skc 產地：韓國</p>
<p>規格/純度:99.7% 起定量：215千克</p>
<p>配送倉儲：上海倉海倉儲</p>
</div>
<div class="clearfix"></div>
</td>
<td class="td-num">
<div class="product-num">
<a href="javascript:;" class="num-reduce num-do fl"><span></span></a>
<input type="text" class="num-input" value="1">
<a href="javascript:;" class="num-add num-do fr"><span></span></a>
</div>
</td>
<td class="td-price">
<p class="red-text">￥<span class="price-text">800</span>.00</p>
</td>
<td class="td-total">
<p class="red-text">￥<span class="total-text">800</span>.00</p>
</td>
<td class="td-do"><a href="javascript:;" class="product-delect">刪除</a></td>
</tr>
</tbody></table>
</div>
<div class="cart-product-info">
<a class="delect-product" href="javascript:;"><span></span>刪除所選商品</a>
<a class="keep-shopping" href="#"><span></span>繼續購物</a>
<a class="btn-buy fr" href="javascript:;">去結算</a>
<p class="fr product-total">￥<span>1600</span></p>
<p class="fr check-num"><span>2</span>件商品總計（不含運費）：</p>
</div>
<div class="cart-worder clearfix">
<a href="javascript:;" class="choose-worder fl"><span></span>綁定跟單員</a>
<div class="worker-info fl">
</div>
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el:'#shopping-cart',
data:{
},
computed: {},
methods:{
}
})
</script>
</html>
productList:[ { 'pro_name': '【斯文】甘油 | 丙三醇',//產品名稱 'pro_brand': 'skc',//品牌名稱 'pro_place': '韓國',//產地 'pro_purity': '99.7%',//規格 'pro_min': "215千克",//最小起訂量 'pro_depot': '上海倉海倉儲',//所在倉庫 'pro_num': 3,//數量 'pro_img': '../../images/ucenter/testimg.jpg',//圖片鏈接 'pro_price': 800//單價 } ]
准備了這么多，大家可能想到，還缺少一個，就是記錄產品是否有選中，但是這個字段，雖然可以在上面那里加，但是意義不大，比如在平常項目那里！
后台的數據不會這樣返回，數據庫也不會有這個字段，這個字段應該是自己添加的。代碼如下
new Vue({ el:'#shopping-cart', data:{ productList:[ { 'pro_name': '【斯文】甘油 | 丙三醇',//產品名稱 'pro_brand': 'skc',//品牌名稱 'pro_place': '韓國',//產地 'pro_purity': '99.7%',//規格 'pro_min': "215千克",//最小起訂量 'pro_depot': '上海倉海倉儲',//所在倉庫 'pro_num': 3,//數量 'pro_img': '../../images/ucenter/testimg.jpg',//圖片鏈接 'pro_price': 800//單價 } ] }, computed: {}, methods:{ }, mounted:function () { //為productList添加select（是否選中）字段，初始值為true var _this=this; //為productList添加select（是否選中）字段，初始值為true this.productList.map(function (item) { _this.$set(item, 'select', true); }) //要像上面這樣寫雙向綁定才能起效，下面的寫法是有問題的，雙向綁定不起效的！ //this.productList.map(function (item) {item.select=true}) } })
步驟一、點擊增加和減少按鈕（箭頭指向地方），所屬列的金額改變（紅框地方）要先把列表的數據給鋪出來。利用v-for指令。代碼如下
<tr v-for="item in productList">
<td class="td-check"><span class="check-span"></span></td>
<td class="td-product"><img :src="item.pro_img" width="98" height="98">
<div class="product-info">
<h6>{{item.pro_name}}</h6>
<p>品牌：{{item.pro_brand}} 產地：{{item.pro_place}}</p>
<p>規格/純度:{{item.pro_purity}} 起定量：{{item.pro_min}}</p>
<p>配送倉儲：{{item.pro_depot}}</p>
</div>
<div class="clearfix"></div>
</td>
<td class="td-num">
<div class="product-num">
<a href="javascript:;" class="num-reduce num-do fl" @click="item.pro_num--"><span></span></a>
<input type="text" class="num-input" v-model="item.pro_num">
<a href="javascript:;" class="num-add num-do fr" @click="item.pro_num++"><span></span></a>
</div>
</td>
<td class="td-price">
<p class="red-text">￥<span class="price-text">{{item.pro_price.toFixed(2)}}</span></p>
</td>
<td class="td-total">
<p class="red-text">￥<span class="total-text">{{item.pro_price*item.pro_num}}</span>.00</p>
</td>
<td class="td-do"><a href="javascript:;" class="product-delect">刪除</a></td>
</tr>
這兩個按鈕的功能已經實現了，后面的金額也會發生變化！是不是感到很驚喜！其實這里沒什么特別的，就是因為輸入框利用v-model綁定了數量（pro_num），然后兩個按鈕分別添加了事件@click="item.pro_num--"和@click="item.pro_num++"。
步驟2
點擊所屬列選擇按鈕（箭頭指向地方），總計的金額（紅框地方）和已選產品的列數（藍框地方）和全選（黃框地方）會改變（如果已經全選了，全選按鈕自動變成全選，如果沒有全選，全選按鈕，自動取消全選）！
首先，選擇與取消選擇，在這里只有兩個操作（其實只有一個：改變這條記錄的select字段）。
<td class="td-check"><span class="check-span" @click="item.select=!item.select" :class="{'check-true':item.select}"></span></td>
其實就是等於添加了@click="item.select=!item.select" :class="{'check-true':item.select}"這里。點擊這個，這條數據的select字段就取反（true->false或者false->true）。然后:class="{'check-true':item.select}"，就會根據這條數據的select字段進行判斷，是否添加check-true類名，如果select字段為true，就添加類名
全選按鈕：
這里用一個computed（計算屬性）就好。
html
<div class="td-check fl"><span class="check-span fl check-all" :class="{'check-true':isSelectAll}"></span>全選</div>
js
computed: { //檢測是否全選 isSelectAll:function(){ //如果productList中每一條數據的select都為true，返回true，否則返回false; return this.productList.every(function (val) { return val.select}); }, //獲取總價和產品總件數 getTotal:function(){ //獲取productList中select為true的數據。 var _proList=this.productList.filter(function (val) { return val.select}),totalPrice=0; for(var i=0,len=_proList.length;i<len;i++){ //總價累加 totalPrice+=_proList[i].pro_num*_proList[i].pro_price; } //選擇產品的件數就是_proList.length，總價就是totalPrice return {totalNum:_proList.length,totalPrice:totalPrice} } },
步驟3
點擊全選按鈕（箭頭指向部分），會自動的對產品進行全選或者取消全選，下面的總計也會發生改變
做到這一步，大家應該知道，全選或者取消全選，就是改變記錄的select。但是怎么知道現在的列表有沒有全選呢？這個很賤，不需要在操作函數（全選與取消全選函數）里面遍歷，大家應該還記得第二步的計算屬性isSelectAll（為true就是全選，否則不是全選），把這個傳進操作函數就好，然后操作函數，根據參數，決定執行全選，還是取消全選操作。代碼如下！
html
<div class="td-check fl"><span class="check-span fl check-all" :class="{'check-true':isSelectAll}" @click="selectProduct(isSelectAll)"></span>全選</div>
js
methods: { //全選與取消全選 selectProduct:function(_isSelect){ //遍歷productList，全部取反 for (var i = 0, len = this.productList.length; i < len; i++) { this.productList[i].select = !_isSelect; } } },
步驟4
點擊刪除產品，會刪除已經選中的，全選按鈕和下面的總計，都會變化！點擊每條記錄后面的刪除，會刪除當前的這條記錄。全選按鈕和下面的總計，也都會變化！
首先，點擊刪除產品，刪除已經選中。這個大家知道了怎么做了！就是遍歷productList，如果哪條記錄的select為true，就刪除。
然后，點擊每條記錄后面的刪除，刪除當前的這條記錄。這個在html遍歷productList的時候。順便帶上索引，然后把索引當成參數，傳進操作函數，然后根據索引參數，刪除productList的哪一條記錄。即可實現！代碼如下！
html
<!--遍歷的時候帶上索引--> <tr v-for="(item,index) in productList"> <td class="td-check"><span class="check-span" @click="item.select=!item.select" :class="{'check-true':item.select}"></span></td> <td class="td-product"><img :src="item.pro_img" width="98" height="98"> <div class="product-info"> <h6>{{item.pro_name}}</h6> <p>品牌：{{item.pro_brand}} 產地：{{item.pro_place}}</p> <p>規格/純度:{{item.pro_purity}} 起定量：{{item.pro_min}}</p> <p>配送倉儲：{{item.pro_depot}}</p> </div> <div class="clearfix"></div> </td> <td class="td-num"> <div class="product-num"> <a href="javascript:;" class="num-reduce num-do fl" @click="item.pro_num--"><span></span></a> <input type="text" class="num-input" v-model="item.pro_num"> <a href="javascript:;" class="num-add num-do fr" @click="item.pro_num++"><span></span></a> </div> </td> <td class="td-price"> <p class="red-text">￥<span class="price-text">{{item.pro_price.toFixed(2)}}</span></p> </td> <td class="td-total"> <p class="red-text">￥<span class="total-text">{{item.pro_price*item.pro_num}}</span>.00</p> </td> <td class="td-do"><a href="javascript:;" class="product-delect" @click="deleteOneProduct(index)">刪除</a></td> </tr> ... <a class="delect-product" href="javascript:;" @click="deleteProduct"><span></span>刪除所選商品</a>
js
//刪除已經選中(select=true)的產品 deleteProduct:function () { this.productList=this.productList.filter(function (item) {return !item.select}) }, //刪除單條產品 deleteOneProduct:function (index) { //根據索引刪除productList的記錄 this.productList.splice(index,1); },
按鈕圖片：
完整代碼
<style> .fl{ float: left; } .fr{ float: right; } blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, img, input, li, ol, p, table, td, textarea, th, ul { margin: 0; padding: 0; } .clearfix{ zoom: 1; } .clearfix:after { clear: both; } .clearfix:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0; } a{ text-decoration: none; color: #333; } img{vertical-align: middle;} .page-shopping-cart{ width: 1200px; margin:50px auto; font-size: 14px; border:1px solid #e3e3e3; border-top:2px solid #317ee7; } .page-shopping-cart .cart-title{ color:#317ee7; font-size: 16px; text-align: left; padding-left: 20px; line-height: 68px; } .page-shopping-cart .red-text { color: #e94826; } .page-shopping-cart .check-span{ display: block; width: 24px; height: 20px; margin-top: 9px; background: url("cartBg.png") no-repeat 0 0; } /* 點擊時改變勾選 */ .page-shopping-cart .check-span.check-true{ background: url('cartBg.png') no-repeat 0 -22px; } .page-shopping-cart .td-check{ width:70px; } .page-shopping-cart .td-product{ width:460px; } .page-shopping-cart .td-num, .page-shopping-cart .td-price, .page-shopping-cart .td-total{ width:160px; } .page-shopping-cart .td-do{ width:150px; } .cart-product-title{ text-align: center; height: 38px; line-height: 38px; padding: 0 20px; background-color: #f7f7f7; border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; } .cart-product-title .td-product{ text-align: center; font-size: 14px; } .cart-product-title .td-check{ text-align: left; } .cart-product-title .td-check .check-span .check-span{ margin:9px 6px 0 0; } /* 內容開始 */ .cart-product{ padding: 0 20px; text-align: center; } .cart-product table{ width: 100%; text-align: center; font-size: 14px; } .cart-product table td{ padding: 20px 0; } .cart-product table tr{ border-bottom:1px dashed #e3e3e3; } .cart-product table tr:last-child{ border-bottom:none; } .cart-product table .product-num{ border: 1px solid #e3e3e3; display: inline-block; text-align: center; } .cart-product table .product-num .num-do{ width: 24px; height: 28px; background: #f7f7f7; display: block; } .cart-product table .product-num .num-reduce span{ display: block; width: 6px; height: 2px; margin:13px auto 0 auto; background: url("cartBg.png") no-repeat -40px -22px; } .cart-product table .product-num .num-add span{ display: block; width: 8px; height: 8px; margin:10px auto 0 auto; background: url("cartBg.png") no-repeat -60px -22px; } .cart-product table .product-num .num-input{ width: 42px; height: 28px; line-height:28px; border:none; text-align: center; } .cart-product table .td-product{ text-align: center; font-size: 12px; line-height: 20px; } .cart-product table .td-product img{ border:1px solid #e3e3e3; margin-right: 10px; } .cart-product table .td-product .product-info{ display: inline-block; vertical-align: middle; text-align: left; } .cart-product table .td-do{ font-size: 12px; } /* 最后一行統計 */ .cart-product-info{ height:50px; line-height: 50px; background: #f7f7f7; padding-left: 20px; } .cart-product-info .delete-product{ color:#666; } .cart-product-info .delete-product span{ display: inline-block; vertical-align: top; margin:18px 8px 0 0; width:13px; height: 15px; background: url("cartBg.png") no-repeat -60px 0; } .cart-product-info .product-total{ font-size: 14px; color:#e94826; } .cart-product-info .product-total span{ font-size: 20px; } .cart-product-info .check-num{ color:#333; } .cart-product-info .check-num span{ color: #e94826; } .cart-product-info .keep-shopping{ color: #666; margin-left: 40px; } .cart-product-info .keep-shopping span{ display: inline-block; vertical-align: top; margin:18px 8px 0 0; width: 15px; height: 15px; background: url("cartBg.png") no-repeat -40px 0; } .cart-product-info .btn-buy{ height: 50px; color: #fff; font-size: 20px; display: block; width: 110px; background: #ff7700; text-align: center; margin-left: 30px; } /* cart-worder */ .page-shopping-cart .cart-worder { padding: 20px; } .page-shopping-cart .cart-worder .choose-worder { color: #fff; display: block; background: #39e; width: 140px; height: 40px; line-height: 40px; border-radius: 4px; text-align: center; margin-right: 20px; } .page-shopping-cart .cart-worder .choose-worder span { display: inline-block; vertical-align: top; margin: 9px 10px 0 0; width: 22px; height: 22px; background: url("cartBg.png") no-repeat -92px 0; } .page-shopping-cart .cart-worder .worker-info { color: #666; } .page-shopping-cart .cart-worder .worker-info img { border-radius: 100%; margin-right: 10px; } .page-shopping-cart .cart-worder .worker-info span { color: #000; } .choose-worker-box { width: 620px; background: #fff; } .choose-worker-box .box-title { height: 40px; line-height: 40px; background: #F7F7F7; text-align: center; position: relative; font-size: 14px; } .choose-worker-box .box-title a { display: block; position: absolute; top: 15px; right: 16px; width: 10px; height: 10px; background: url("shopping_cart.png") no-repeat -80px 0; } .choose-worker-box .box-title a:hover { background: url("shopping_cart.png") no-repeat -80px -22px; } .choose-worker-box .worker-list { padding-top: 30px; height: 134px; overflow-y: auto; } .choose-worker-box .worker-list li { float: left; width: 25%; text-align: center; margin-bottom: 30px; } .choose-worker-box .worker-list li p { margin-top: 8px; } .choose-worker-box .worker-list li.cur a { color: #f70; } .choose-worker-box .worker-list li.cur a img { border: 1px solid #f70; } .choose-worker-box .worker-list li a:hover { color: #f70; } .choose-worker-box .worker-list li a:hover img { border: 1px solid #f70; } .choose-worker-box .worker-list li img { border: 1px solid #fff; border-radius: 100%; } </style> <!-- 購物車 --> <div id="shopping-cart" class="page-shopping-cart"> <h4 class="cart-title">購物清單</h4> <!-- 標題 --> <div class="cart-product-title clearfix"> <div class="td-check fl"> <!-- 當切換到check-true類名時就調用全選函數 --> <span class="check-span fl check-all" :class="{'check-true':isSelectAll}" @click="selectProduct(isSelectAll)"></span> <!-- 選擇框 --> 全選 </div> <div class="td-product fl">商品</div> <div class="td-num fl">數量</div> <div class="td-price fl">單價(元)</div> <div class="td-total fl">金額(元)</div> <div class="td-do fl">操作</div> </div> <!-- 內容 --> <div class="cart-product clearfix"> <table> <tbody> <tr v-for='(item,index) in productList'> <td class="td-check"> <span class="check-span" @click='item.select=!item.select' :class="{'check-true':item.select}"></span> </td> <td class="td-product"> <img :src="item.pro_img" width="98" height="98" alt=""> <div class="product-info"> <h6>{{item.pro_name}}</h6> <p>品牌：{{item.pro_brand}} {{item.pro_place}}</p> <p>規格/純度:{{item.pro_purity}} 起定量：{{item.pro_min}}</p> <p>配送倉儲：{{item.pro_depot}}</p> </div> <div class="clearfix"></div> </td> <td class="td-num"> <div class="product-num"> <a href="javascript:;" class="num-reduce num-do fl" @click='item.pro_num--'><span></span></a> <input type="text" class="num-input" v-model='item.pro_num'> <a href="javascript:;" class="num-add num-do fr" @click='item.pro_num++'><span></span></a> </div> </td> <td class="td-price"> <p class="red-text">￥<span class="price-text">{{item.pro_price.toFixed(2)}}</span>.00</p> </td> <td class="td-total"> <p class="red-text">￥<span class="price-text">{{item.pro_price*item.pro_num}}</span>.00</p> </td> <td class="td-do"> <a href="javascript:;" class="product-delete" @click='deleteOneProduct(index)'>刪除</a> </td> </tr> </tbody> </table> </div> <!-- 最后一行統計 --> <div class="cart-product-info"> <a href="javascript:;" class="delete-product" @click='deleteProduct'><span></span>刪除所選商品</a> <a href="#" class="keep-shopping"><span></span>繼續購物</a> <a href="javascript:;" class="fr btn-buy">去結算</a> <a href="javascript:;" class="fr product-total">￥<span>{{getTotal.totalPrice}}</span></a> <a href="javascript:;" class="fr check-num"><span>{{getTotal.totalNum}}</span>件商品總計（不含運費）:</a> </div> <div class="cart-worder clearfix"> <a href="javascript:;" class="choose-worder fl"><span></span>綁定跟單員</a> <div class="worker-info fl"> </div> </div> </div> <script src="https://unpkg.com/vue"></script> <script type="text/javascript"> new Vue({ el:'#shopping-cart', data:{ productList:[ { 'pro_name':'【斯文】甘油|丙三醇', 'pro_brand':'skc', 'pro_place':'韓國', 'pro_purity':'99.7%', 'pro_min':'215千克', 'pro_depot':'上海滄海倉儲', 'pro_num':3, 'pro_img':'testimg.jpg', 'pro_price': 800 }, { 'pro_name':'【斯文】甘油|丙三醇', 'pro_brand':'skc', 'pro_place':'韓國', 'pro_purity':'99.7%', 'pro_min':'215千克', 'pro_depot':'上海滄海倉儲', 'pro_num':1, 'pro_img':'testimg.jpg', 'pro_price': 700 }, { 'pro_name':'【斯文】甘油|丙三醇', 'pro_brand':'skc', 'pro_place':'韓國', 'pro_purity':'99.7%', 'pro_min':'215千克', 'pro_depot':'上海滄海倉儲', 'pro_num':1, 'pro_img':'testimg.jpg', 'pro_price': 600 } ] }, computed:{ // 檢測是否全選 isSelectAll:function(){ //如果productList中每一條數據的select都為true,就返回true,否則返回false return this.productList.every(function(val){return val.select}) }, // 獲取總價和產品總數 getTotal:function(){ // 獲取list中select為true的數據 var _proList = this.productList.filter(function(val){return val.select}), totalPrice = 0; for (var i = 0; i < _proList.length; i++) { // 總價累加 totalPrice += _proList[i].pro_num * _proList[i].pro_price; } // 選擇產品的件數就是_proList.lenth，總價就是totalPrice return{totalNum:_proList.length,totalPrice:totalPrice} } }, methods:{ // 全選與取消全選 selectProduct:function(_isSelect){ //遍歷productList,全部取反 for (var i = 0; i < this.productList.length; i++) { this.productList[i].select = !_isSelect } }, //刪除選中的產品 deleteProduct:function(){ this.productList =this.productList.filter(function(item){return !item.select}) }, //刪除單條產品 deleteOneProduct:function(index){ //根據索引刪除productList的記錄 this.productList.splice(index,1); }, }, mounted:function(){ //為productList添加select（是否選中字段，初始值為true） var _this=this; this.productList.map(function(item){ //map:'鍵值對' _this.$set(item,'select',true) //往item添加select屬性，默認為true }) } }) </script>
轉自：https://segmentfault.com/a/1190000010801357#articleHeader6 （守候）