订单处理
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车加加减减</title>
<style>
#app table{
border-collapse: collapse;
background-color: pink;
}
#app table td,th,tr{
border:1px solid black;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>单价:元</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<template v-for="(item,index) in goods" :key="index">
<tr v-if="item.num > 0">
<td>{{item._id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="item.num--">-</button>
<span>{{item.num}}</span>
<button @click="item.num++">+</button>
</td>
<td>{{item.price*item.num}}元</td>
<td><button @click="goods.splice(index,1)">删除</button></td>
</tr>
</template>
<tr>
<td colspan="6">总价:{{totalPrices()}}</td>
</tr>
</tbody>
</table>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
goods:[
{_id:1,name:"苹果",price:5,num:5},
{_id:2,name:"香蕉",price:3,num:5},
{_id:3,name:"橘子",price:4,num:5}
]
},
methods:{
totalPrices(){
return this.goods.reduce((sum,item)=>{
return sum + item.price * item.num
},0);
}
}
})
</script>
</body>
</html>
效果
知识点复习
v-for,v-if,@click,:key,template标签以及数组的splice(),reduce()方法的使用