<template>
<div>
<h1>购物车</h1>
<div class="root">
<Row>
<Col span='4'>编号</Col>
<Col span='5'>商品名字</Col>
<Col span='5'>单价</Col>
<Col span='5'>数量</Col>
<Col span='5'>金额</Col>
</Row>
<Row v-for="(item,index) in goods" :key="index">
<Col span="4">{{item.id}}</Col>
<Col span="5">{{item.name}}</Col>
<Col span="5">{{item.price}}</Col>
<Col span="5"><input type="number" v-model="item.num"></Col>
<Col span="5">{{Subtotal(index)}}</Col>
</Row>
<Row>
<Col span="14">合计</Col>
<Col span="5">{{Num}}</Col>
<Col span="5">{{total}}</Col>
</Row>
</div>
</div>
</template>
<script>
export default {
name: "ShoppingCart",
data(){
return{
goods:[
{id:'001',name:'iphone',price:5999,num:0,total:0},
{id:'002',name:'华为',price:4999,num:0,total:0},
{id:'003',name:'小米',price:3999,num:0,total:0},
]
}
},
computed:{
Subtotal(){
return function (index) {
let price = this.goods[index].price
let num = this.goods[index].num
return price*num
}
},
Num:function(){
let n =0;
this.goods.forEach(function (value) {
n+= value.num *1
})
return n
},
total:function () {
let v = 0;
this.goods.forEach(function (value) {
v += value.num*value.price
})
return v
}
}
}
</script>
<style scoped lang="less">
h1 {
text-align: center;
line-height: 4rem;
}
.root {
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.ivu-row {
line-height: 40px;
text-align: center;
/*border-bottom: 1px solid #ccc;*/
div{
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
}
input {
width: 100%;
border: none;
text-align: center;
/*border-bottom: 1px solid #999;*/
}
}
</style>
Vue 实现小小购物车
猜你喜欢
转载自blog.csdn.net/weixin_38201500/article/details/89201619
今日推荐
周排行