效果图
文件目录
Index.vue:
<template>
<div class="shopping">
<Header />
<Item
v-for="item in items"
:key="item.id"
:item="item"
@change-number="changeNumber"
/>
<Footer :items="items" />
</div>
</template>
<script>
import Header from "./Header";
import Item from "./Item";
import Footer from "./Footer";
export default {
data() {
return {
items: [
{
id: 0,
name: "TCL彩电",
number: 1,
price: 100
},
{
id: 1,
name: "机顶盒",
number: 1,
price: 200
},
{
id: 2,
name: "海尔冰箱",
number: 2,
price: 100
},
{
id: 3,
name: "小米手机",
number: 1,
price: 100
},
{
id: 4,
name: "PPTV电视",
number: 1,
price: 100
}
]
};
},
methods: {
changeNumber(data) {
const { id, type } = data;
this.items.some((item, index) => {
if (item.id === id) {
if (type === "change") {
item.number = Number(data.number);
} else if (type === "add") {
++item.number;
} else if (type === "reduce" && item.number > 0) {
--item.number;
} else if (type === "delete") {
this.items.splice(index, 1);
}
return true;
}
});
}
},
components: {
Header,
Item,
Footer
}
};
</script>
<style scoped>
</style>
Header.vue:
<template>
<div class="header">
<h1>张三的商品</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.header h1{
background: #0000FF;
color: #FFF;
margin: 0;
}
</style>
Item.vue:
<template>
<div class="item">
<span class="name">{{item.name}}</span>
<span class="operation">
<button @click="reduceNumber">-</button>
<input :value="item.number" @change="changeNumber" />
<button @click="addNumber">+</button>
<button @click="deleteProduct">x</button>
</span>
</div>
</template>
<script>
export default {
props: ["item"],
methods: {
reduceNumber() {
this.$emit("change-number", {
id: this.item.id,
type: "reduce"
});
},
changeNumber(e) {
this.$emit("change-number", {
id: this.item.id,
number: e.target.value,
type: "change"
});
},
addNumber() {
this.$emit("change-number", {
id: this.item.id,
type: "add"
});
},
deleteProduct() {
this.$emit("change-number", {
id: this.item.id,
type: "delete"
});
}
}
};
</script>
<style scoped>
.item {
border-bottom: 1px solid #000;
display: flex;
align-items: center;
padding-top: 5px;
padding-bottom: 5px;
justify-content: space-between;
}
</style>
Footer.vue:
<template>
<div class="footer">
总价:{{sum}}
<button>结算</button>
</div>
</template>
<script>
export default {
props: ["items"],
computed: {
sum() {
let total = 0;
this.items.forEach(value => {
total += value.number * value.price;
});
return total;
}
}
};
</script>
<style scoped>
.footer {
padding-top: 5px;
padding-bottom: 5px;
background: #ffff00;
color: #ff0000;
text-align: right;
}
.footer button {
border: 0;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
background: #ff0000;
color: #fff;
cursor: pointer;
}
</style>