在项目中写一个购物车功能

<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>

相关推荐
再学一点就睡2 小时前
手写 Promise 静态方法:从原理到实现
前端·javascript·面试
再学一点就睡3 小时前
前端必会:Promise 全解析,从原理到实战
前端·javascript·面试
前端工作日常3 小时前
我理解的eslint配置
前端·eslint
前端工作日常4 小时前
项目价值判断的核心标准
前端·程序员
90后的晨仔4 小时前
理解 Vue 的列表渲染:从传统 DOM 到响应式世界的演进
前端·vue.js
OEC小胖胖5 小时前
性能优化(一):时间分片(Time Slicing):让你的应用在高负载下“永不卡顿”的秘密
前端·javascript·性能优化·web
烛阴5 小时前
ABS - Rhomb
前端·webgl
植物系青年5 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(下)
前端·低代码
植物系青年5 小时前
10+核心功能点!低代码平台实现不完全指南 🧭(上)
前端·低代码
桑晒.5 小时前
CSRF漏洞原理及利用
前端·web安全·网络安全·csrf