在项目中写一个购物车功能
<template><div class="two">
<div v-for="item in taskPriceList" :key="item.id">
<input type="radio" value="selectInput" v-model="item.selectF" />
<p>￥{{item.price}}元</p>
<div>
<button @click="delBtn(item.id)">-</button>
<span class="span">{{item.count}}</span>
<button @click="addBtn(item.id)">+</button>
</div>
</div>
<p>总共合计：{{totalPrice}}元</p>
</div>
</template>
<script>
export default {
name: "ShengMingZQTwo",
data() {
return {
taskPriceList: [
{ id: 1, selectF: "", count: 1, price: 138 },
{ id: 2, selectF: "", count: 2, price: 30 },
{ id: 3, selectF: "", count: 1, price: 450 }
]
};
},
computed: {
totalPrice() {
let sum = 0;
this.taskPriceList.forEach(item => {
if (item.selectF == "selectInput") {
sum += item.price * item.count;
}
});
return sum;
}
},
methods: {
addBtn(value) {
this.taskPriceList.forEach(item => {
if (value == item.id) {
item.count++;
item.selectF = "selectInput";
}
});
},
delBtn(value) {
this.taskPriceList.forEach(item => {
if (value == item.id && item.count > 1) {
item.count--;
if (item.count == 1) {
item.selectF = "";
}
}
});
}
}
};
</script>
<style scoped>
.span {
display: inline-block;
margin: 0 18px;
}
</style>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]