简易购物车，增加减少删除，算商品总价
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>简易购物车</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<div id="app">
<template v-if="list.length">
<table width="500" border="1">
<thead>
<tr>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>{{ item.count }}</td>
<td>
<a href="#" @click="addGoods(index)">增加</a>
<a href="#" @click="reduceGoods(index)" :disabled="item.count === 1">减少</a>
<a href="#" @click="removeGoods(index)">移除</a>
</td>
</tr>
</tbody>
</table>
<div>商品总价：{{totalPrice}}</div>
</template>
<div v-else>购物车为空</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data: {
list: [
{
id:1,
name:"敷尔佳白膜",
price:68,
count:1
},
{
id:2,
name:"敷尔佳黑膜",
price:80,
count:1
},
{
id:3,
name:"敷尔佳虾青素",
price:64,
count:1
}
]
},
computed:{
totalPrice: function(){
var total = 0;
for(var i=0; i<this.list.length; i++){
total += this.list[i].price * this.list[i].count;
}
return total;
}
},
methods:{
addGoods: function(index){
this.list[index].count++;
},
reduceGoods: function(index){
if(this.list[index].count == 1) return;
this.list[index].count--;
},
removeGoods: function(index){
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>
