vue@2.6.14购物车统计总价
Posted 知其黑、受其白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue@2.6.14购物车统计总价相关的知识，希望对你有一定的参考价值。
阅读目录
运行效果
源码
html代码中需要插入css代码，在最下方需插入vue代码即可运行。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--插入css代码-->
</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" :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">
<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>0?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>
</tbody>
</table>
</div>
<div class="cart-product-info">
<a class="delect-product" href="javascript:;" @click="deleteProduct"><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>getTotal.totalPrice</span></p>
<p class="fr check-num"><span>getTotal.totalNum</span>件商品总计（不含运费）：</p>
</div>
</div>
</body>
<!--插入vue代码-->
</html>
CSS
<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以上是关于vue@2.6.14购物车统计总价的主要内容，如果未能解决你的问题，请参考以下文章