vue簡(jiǎn)單實(shí)現(xiàn)購(gòu)物車結(jié)算功能
本文實(shí)例為大家分享了vue簡(jiǎn)單實(shí)現(xiàn)購(gòu)物車結(jié)算的具體代碼,供大家參考,具體內(nèi)容如下
樣式?jīng)]有寫(xiě)
<template> ?<div class="about container"> ? ?<button class="btn btn-default"> ? ? ?<router-link to="/customers">返回主頁(yè)</router-link> ? ?</button> ? ?<button>獲取數(shù)據(jù)</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>價(jià)格:{{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>合計(jì):{{totalMoney}}</button> ?</div> </template> <script> export default { ?name: "about", ?// 調(diào)用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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vuejs手把手教你寫(xiě)一個(gè)完整的購(gòu)物車實(shí)例代碼
- 基于Vuejs實(shí)現(xiàn)購(gòu)物車功能
- vue實(shí)現(xiàn)購(gòu)物車小案例
- Vue實(shí)現(xiàn)購(gòu)物車功能
- vue實(shí)現(xiàn)商城購(gòu)物車功能
- vue 實(shí)現(xiàn)購(gòu)物車總價(jià)計(jì)算
- vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車的復(fù)選框全選和反選功能
- vuex實(shí)現(xiàn)的簡(jiǎn)單購(gòu)物車功能示例
- vue實(shí)現(xiàn)購(gòu)物車拋物線小球動(dòng)畫(huà)效果的方法詳解
- Vue實(shí)現(xiàn)購(gòu)物車詳情頁(yè)面的方法
相關(guān)文章
Vue3項(xiàng)目中引入ElementUI并使用的示例詳解
ElementUI是一個(gè)強(qiáng)大的PC端UI組件框架,它不依賴于vue,但是卻是當(dāng)前和vue配合做項(xiàng)目開(kāi)發(fā)的一個(gè)比較好的ui框架,本文主要介紹了如何在vue3中引入使用ElementUI,需要的可以參考一下2023-06-06VUE組件中的 Drawer 抽屜實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE組件 之 Drawer 抽屜 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08vue組件傳值的實(shí)現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue組件傳值的實(shí)現(xiàn)方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js組建傳值的三種實(shí)現(xiàn)方式,包括父?jìng)髯?、子傳父及非父子傳?需要的朋友可以參考下2020-02-02vue3?setup語(yǔ)法糖下父組件如何調(diào)用子組件
這篇文章主要介紹了vue3?setup語(yǔ)法糖下父組件如何調(diào)用子組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue3.3?+?TS4構(gòu)建實(shí)現(xiàn)ElementPlus功能的組件庫(kù)示例
Vue.js?是目前最盛行的前端框架之一,而?TypeScript?則是一種靜態(tài)類型言語(yǔ),它能夠讓開(kāi)發(fā)人員在編寫(xiě)代碼時(shí)愈加平安和高效,本文將引見(jiàn)如何運(yùn)用?Vue.js?3.3?和?TypeScript?4?構(gòu)建一個(gè)自主打造媲美?ElementPlus?的組件庫(kù)2023-10-10Nuxt3+ElementPlus構(gòu)建打包部署全過(guò)程
網(wǎng)上大部分關(guān)于Nuxt打包部署教程可謂是可以用五花八門來(lái)形容,這對(duì)于第一次接觸的朋友簡(jiǎn)直是無(wú)從下手,這篇文章主要給大家介紹了關(guān)于Nuxt3+ElementPlus構(gòu)建打包部署的相關(guān)資料,需要的朋友可以參考下2023-01-01