使用vue.js完成购物车的编写，可以增加数量，移除某个对象，总金额也会随之发生改变。
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车示例</title>
<style type="text/css">
[v-cloak]{
display: none;
}
table{
border: 1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th{
background: #F7F7F7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count===1">-</button>
{{item.count}}
<button @click="handleAdd(index)" >+</button>
</td>
<td>
<button @click="handleRemove(index)" >移除</button>
</td>
</tr>
</tbody>
</table>
<div>总价:¥ {{totalPrice}}</div>
</template>
<div v-else>购物车为空</div>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/javascript" src="js/cart.js"></script>
</body>
</html>
cart.js:
var app=new Vue({
el:'#app',
data:{
list:[{
id:1,
name:'iphone 7',
price:6888,
count:1
},{
id:2,
name:'iVIVO x27',
price:3888,
count:2
},{
id:3,
name:'iphone 8',
price:8888,
count:10
},{
id:4,
name:'iphone 10',
price:16888,
count:113
}]
},
computed:{
totalPrice:function(){
var total=0;
for(var i =0;i<this.list.length;i++){
var item = this.list[i];
total+=item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},
methods:{
handleReduce:function(index){
if(this.list[index].count===1) return ;
this.list[index].count--;
},
handleAdd:function(index){
this.list[index].count++;
},
handleRemove:function(index){
this.list.splice(index,1);
}
}
});
