vue簡單實現購物車結算功能
更新時間:2022年04月14日 07:50:32 作者:Amnesia?
這篇文章主要為大家詳細介紹了vue簡單實現購物車結算功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue簡單實現購物車結算的具體代碼,供大家參考,具體內容如下
樣式沒有寫
<template> ?<div class="about container"> ? ?<button class="btn btn-default"> ? ? ?<router-link to="/customers">返回主頁</router-link> ? ?</button> ? ?<button>獲取數據</button> ? ?<ul> ? ? ?<li v-for="(item,index) in this.list" :key="index"> ? ? ? ?<div> ? ? ? ? ?<input type="checkbox" v-model="item.checked" /> ? ? ? ? ?<span>{{item.title}}</span> ? ? ? ? ?<button class="btn btn-default" @click="reduce(index)">-</button> ? ? ? ? ?<span>{{item.num}}</span> ? ? ? ? ?<button class="btn btn-default" @click="add(index)">+</button> ? ? ? ? ?<span>價格:{{item.price}}</span> ? ? ? ? ?<button @click="del(index,item._id)" class="btn btn-default">刪除</button> ? ? ? ?</div> ? ? ?</li> ? ?</ul> ? ?<input type="checkbox" v-model="allcheck" @click="checkall" /> ? ?<button>合計:{{totalMoney}}</button> ?</div> </template> <script> export default { ?name: "about", ?// 調用app.vue組件中的方法 ?inject: ["reload"], ?data() { ? ?return { ? ? ?list: [], ? ? ?allcheck: false ? ?}; ?}, ?methods: { ? ?async getproduct() { ? ? ?const res = await this.$http.get("/goodslist"); ? ? ?this.list = res.data; ? ? ?localStorage.setItem("shoppingcart", JSON.stringify(this.list)); ? ? ?console.log(this.list); ? ?}, ? ?add(i) { ? ? ?this.list[i].num++; ? ?}, ? ?reduce(i) { ? ? ?if (this.list[i].num <= 1) { ? ? ? ?this.list[i].num = 0; ? ? ? ?return; ? ? ?} ? ? ?this.list[i].num--; ? ?}, ? ?checkall() { ? ? ?// ? console.log(this.allcheck); ? ? ?console.log(event.target.checked); ? ? ?this.list.forEach(item => { ? ? ? ?item.checked = event.target.checked; ? ? ? ?// console.log(item._id) ? ? ?}); ? ?}, ? ?async del(i, id) { ? ? ?const res = await this.$http.delete("/delfile/" + id); ? ? ?console.log(res); ? ? ?this.reload(); ? ?} ?}, ?computed: { ? ?totalMoney() { ? ? ?let allmoney = 0; ? ? ?let isAllCheck = true; ? ? ?for (let i in this.list) { ? ? ? ?if (this.list[i].checked) { ? ? ? ? ?allmoney += this.list[i].price * this.list[i].num; ? ? ? ?} else { ? ? ? ? ?isAllCheck = false; ? ? ? ?} ? ? ?} ? ? ?this.allcheck == isAllCheck; ? ? ?return allmoney; ? ?} ?}, ?created() { ? ?this.getproduct(); ?} }; </script> <style> li { ?list-style: none; } </style>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue3.3?+?TS4構建實現ElementPlus功能的組件庫示例
Vue.js?是目前最盛行的前端框架之一,而?TypeScript?則是一種靜態(tài)類型言語,它能夠讓開發(fā)人員在編寫代碼時愈加平安和高效,本文將引見如何運用?Vue.js?3.3?和?TypeScript?4?構建一個自主打造媲美?ElementPlus?的組件庫2023-10-10