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

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

相关推荐
@小红花20 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵23 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲38 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年41 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html