这次我将给大家带来一个vue.js实现购物车的小项目，如有不足请严厉指出。
购物车功能有删除和添加，计算总金额，节省总金额，以及调整购买数量等功能。
js主要有以下方法
删除，添加，手动修改数量，总价格计算函数，获商品积分计算函数，节省总金额，一共分为5个事件
具体效果如下图
HTML的代码在这里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车管理</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="head">
<div>
<img src="./img/shopping_myshopping.gif" alt="shopping"><a href="#" style="padding-left:
8px;">全场免运费活动中</a>
</div>
<div class="shopping_commend">
<div class="shopping_commend_left">根据您挑选的商品，当当为您推荐</div>
<div class="shopping_commend_right"><img src="./img/shopping_arrow_up.gif"
alt="shopping" id="shopping_commend_arrow" onclick="showAndHide('shopping_commend_sort')"></div>
</div>
<div id="shopping_commend_sort">
<div class="shopping_commend_sort_left">
<ul v-for="app in text">
<li class="shopping_commend_list_1">.<a href="#" class="blue">{{app.name}}
</a></li>
<li class="shopping_commend_list_2">￥{{app.discount}}</li>
<li class="shopping_commend_list_3">￥{{app.Price}}</li>
<li class="shopping_commend_list_4">
<a class="shopping_yellow" @click="tiaj(app)">购买</a>
</li>
</ul>
</div>
<div class="shopping_commend_sort_mid"></div>
<div class="shopping_commend_sort_left">
<ul v-for="app in ayy">
<li class="shopping_commend_list_1">.<a href="#" class="blue">{{app.name}}
</a></li>
<li class="shopping_commend_list_2">￥{{app.discount}}</li>
<li class="shopping_commend_list_3">￥{{app.Price}}</li>
<li class="shopping_commend_list_4">
<a class="shopping_yellow" @click="tiaj(app)">购买</a>
</li>
</ul>
</div>
</div>
<div class="shopping_list_top">您已选购以下商品</div>
<div class="shopping_list_border">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="shopping_list_title">
<td class="shopping_list_title_1" >商品名</td>
<td class="shopping_list_title_2">单品积分</td>
<td class="shopping_list_title_3">市场价</td>
<td class="shopping_list_title_4">当当价</td>
<td class="shopping_list_title_5">数量</td>
<td class="shopping_list_title_6">删除</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr class="shopping_product_list" v-for="app,index in top">
<td class="shopping_product_list_1"><a href="#" class="blue">
{{app.name}}</a></td>
<td class="shopping_product_list_2">{{app.inster}}</td>
<td class="shopping_product_list_3">￥{{app.discount}}</td>
<td class="shopping_product_list_4">￥{{app.Price}}</td>
<td class="shopping_product_list-5" style="padding-left: 24px;"><input
type="text" v-model="app.num" style="width: 33px;text-align: center"></td>
<td class="shopping_product_list_6"><input class="blue" type="button"
@click="remove(index)" value="删除"></td>
</tr>
</table>
<div class="shopping_list_ned">
<ul >
<li class="shopping_list_ned_1"><input name type="image"
src="./img/shopping_balance.gif"></li>
<li class="shopping_list_ned_2" >
￥<span>{{totalPrices.toFixed(2)}}</span>
</li>
<li class="shopping_list_ned_3">商品金额总计:</li>
<li class="shopping_list_ned_4">
您共节省:<strong>￥{{totalDisPrice.toFixed(2)}}</strong><br />
可获商品积分:<strong>{{totalScore}}</strong>
</li>
</ul>
</div>
</div>
</div>
<script src="../Vue/vue.js"></script>
<script src="./index.js"></script>
</body>
</html>
CSS代码
body,ul,li,dl,dd,dt{
margin:0px;
padding:0px;
font-size:12px;
line-height:20px;
color:#333;
list-style-type: none;
}
#head{
width: 960px;
height: 550px;
margin: 0px auto;
padding-top: 40px;
}
.shopping_commend{
width: 960px;
height: 20px;
border: 1px darkgrey solid;
}
.shopping_commend_left{
float: left;
padding-left: 10px;
}
.shopping_commend_right{
float: right;
padding-right: 6px;
padding-top: 2px;
}
#shopping_commend_sort{
width: 960px;
height: 127px;
border: 1px #999 solid;
border-top: 0px;
}
.shopping_commend_sort_left{
width: 450px;
height: 110px;
margin-top: 5px;
margin-left: 10px;
float: left;
}
.shopping_commend_list_1{
float: left;
height: 30px;
line-height: 30px;
width: 240px;
}
.shopping_commend_list_2{
width: 70px;
text-align: center;
text-decoration: line-through;
color: #999;
float: left;
}
.shopping_commend_list_4{
float: left;
text-align: center;
width: 65px;
}
.shopping_commend_list_3{
float: left;
width: 70px;
text-align: center;
}
.shopping_yellow{
color: #ED610C;
}
.shopping_commend_list_4 a:hover{
color: #ED610C;
}
.shopping_commend_sort_mid {
float: left;
width: 15px;
background-image: url(../img/shopping_dotted.gif);
background-repeat: repeat-y;
height: 120px;
margin-top: 3px;
}
a{
color:#333333;
text-decoration: none;
}
a:hover{
color:#333333;
text-decoration:underline;
}
img{
border:0px;
}
.blue{
color:#1965b3;
text-decoration:none;
}
.blue:hover{
color:#1965b3;
text-decoration:underline;
}
.shopping_commend{
background-color: #FFF9EB;
}
.shopping_list_top{
font-size: 15px;
font-weight: bold;
clear: both;
margin-top: 40px;
}
.shopping_list_border{
width: 960px;
height: auto;
border: 1px #999 solid;
background-color: #FEFBF2;
}
.shopping_list_title{
background-color: #D8E4C6;
height: 25px;
}
.shopping_product_list{
height: 40px;
}
.shopping_product_list td{
border-bottom: dashed 1px #999;
}
.shopping_list_title_1{
padding-left: 28px;
width: 422px;
}
.shopping_list_title_2{
width: 120px;
text-align: center
}
.shopping_list_title_3{
width: 121px;
text-align: center
}
.shopping_list_title_4{
width: 120px;
text-align: center
}
.shopping_list_title_5{
width: 71px;
text-align: center
}
.shopping_list_title_6{
width: 71px;
text-align: center
}
.shopping_product_list_1{
padding-left: 28px;
width: 422px;
}
.shopping_product_list_2{
width: 120px;
text-align: center
}
.shopping_product_list_3{
width: 121px;
text-align: center
}
.shopping_product_list_4{
width: 120px;
text-align: center
}
.shopping_product_list_5{
width: 71px;
}
.shopping_product_list_6{
width: 71px;
text-align: center
}
.shopping_list_ned{
background-color: #CDDBB8;
height: 65px;
}
.shopping_list_ned_1{
float: right;
padding-top: 15px;
padding-right: 20px;
}
.shopping_list_ned_2{
float: right;
font-size: 18px;
color: red;
padding-top: 25px;
padding-right: 20px;
}
.shopping_list_ned_3{
float: right;
font-size: 18px;
padding-top: 25px;
}
.shopping_list_ned_4{
float: right;
width: 108px;
height: 40px;
/* border: 1px #666666 solid; */
margin-top: 15px;
border-right: 2px #666666 solid;
}
strong{
color:#BD3E00;
}
js的代码
var vm=new Vue({
el:"#head",
data:{
text:[
{name:'JavaScript DOM编程艺术',discount:'39.80',Price:'29.20'},
{name:'解禁（当当网独家首发）',discount:'28.00', Price:'19.40'},
{name:'地王之王（金融危机下房地产行...',discount:'32.80',Price:'25.10'},
{name:'逃庄',discount:'36.00',Price:'27.70'}
],
ayy:[
{name:'深入浅出MySQL数据库开发、优...',discount:'59.00',Price:'47.20'},
{name:'大玩家（马未都、王刚推荐!央...',discount:'34.80',Price:'20.60'},
{name:'都市风水师--官场风水小说：一...',discount:'39.80',Price:'30.50'},
{name:'国戏（以麻将术语解读宦海沉浮...',discount:'25.00',Price:'17.30'}
],
top:[
{name:'私募（首部披露资本博弈秘密的金
融...',inster:'189',discount:'32.00',Price:'18.90',num:1},
{name:'小团圆（张爱玲最神秘小说遗稿）',inster:'173',discount:'28.00',Price:'17.30',num:1},
{name:'不抱怨的世界(畅销全球80国的世
界...',inster:'154',discount:'24.80',Price:'15.40',num:1},
{name:'福玛特双桶洗衣机XPB20-07S',inster:'358',discount:'458.00',Price:'358.00',num:1}
]
},
删除
methods:{
//删除
remove:function(index){
this.top.splice(index,1)
},
}
添加
methods:{
//添加
tiaj(itme){
var bool=true;
for(var i of this.top){
if(itme.name==i.name){
i.num++;
bool=false;
break;
}
}
if(bool){
this.top.push({name:itme.name,inster:(itme.Price)
*10,discount:itme.discount,Price:itme.Price,num:1
})
}
}
},
计算总金额
computed:{
//总金额
totalPrices:function(){
var allp=0;
for(var i=0;i<this.top.length;i++){
allp=allp+this.top[i].Price*this.top[i].num;
}
return allp;
},
}
获商品积分
totalScore:function(){
var ss=0;
for(var i=0;i<this.top.length;i++){
ss+=this.top[i].inster*this.top[i].num;
}
return ss;
},
节省总金额
totalDisPrice:function(){
var score=0;
for(var i=0;i<this.top.length;i++){
score+=this.top[i].discount*this.top[i].num-this.top[i].Price*this.top[i].num;
}
return score;
},