<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 實現小小購物車
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.