vue实现简易购物车功能
<template>
<div>
<table v-if='list.length > 0'>
<thead>
<tr>
<td>序号</td>
<td>商品名称</td>
<td>商品单价</td>
<td>商品数量</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr
v-for='(item,index) in list'
>
<td>
{{item.id}}
</td>
<td>
{{item.name}}
</td>
<td>
{{item.price}}
</td>
<td>
<button
@click='reduce(index)'
:disabled='item.count===1'
>-</button>
{{item.count}}
<button @click='add(index)'>+</button>
</td>
<td>
<button @click='remove(index)'>删除</button>
</td>
</tr>
</tbody>
<h1>总价:{{totalPrice}}</h1>
</table>
<div v-else>暂无数据...</div>
</div>
</template>
<script>
export default{
data () {
return {
list:[
{
id:0,
name:"足球",
price:200,
count:1
},
{
id:1,
name:"上衣",
price:109,
count:1
},
{
id:2,
name:"鞋",
price:1500,
count:1
},
{
id:3,
name:"充电宝",
price:70,
count:1
}
]
}
},
methods:{
add(index){
this.list[index].count++;
},
reduce(index){
if(this.list[index].count === 1) return;
this.list[index].count--;
},
remove(index){
this.list.splice(index,1)
}
},
computed:{
totalPrice(){
let total = 0;
for(let i=0;i<this.list.length;i++){
total+= this.list[i].price*this.list[i].count;
}
return total;
}
}
}
</script>
<style>
table{
border:1px solid #f5f5f5;
border-spacing: 0;
border-collapse: collapse;
}
tr,td{
padding:15px;
border:1px solid #e9e9e9;
}
</style>