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

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

相关推荐
剑亦未配妥24 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师6 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny076 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy7 小时前
css的基本知识
前端·css
昔人'7 小时前
css `lh`单位
前端·css
破无差8 小时前
《赛事报名系统小程序》
小程序·html·uniapp
Nan_Shu_6149 小时前
Web前端面试题(2)
前端
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队10 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光10 小时前
css之一个元素可以同时应用多个动画效果
前端·css