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

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

相关推荐
MiyueFE28 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子32 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
小宁爱Python40 分钟前
FastAPI+Sqlite+HTML的登录注册与文件上传系统:完整实现指南
sqlite·html·fastapi
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游2 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss