Vue實(shí)現(xiàn)購(gòu)物車計(jì)算總價(jià)功能
更新時(shí)間：2022年04月14日 17:06:47 作者：coder_wb
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)購(gòu)物車計(jì)算總價(jià)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
用Vue實(shí)現(xiàn)一個(gè)購(gòu)物車計(jì)算總價(jià)的功能，供大家參考，具體內(nèi)容如下
代碼
html
<div id="app">
? ? ? ? <div class="panel panel-info">
? ? ? ? ? ? <div class="panel-heading">
? ? ? ? ? ? ? ? <h3 class="panel-title">購(gòu)物車</h3>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="panel-body">
? ? ? ? ? ? ? ? <div class="checkbox">
? ? ? ? ? ? ? ? ? ? <label>
? ? ? ? ? ? ? ? ? ? ? ? <input type="checkbox" v-model="checkAll">
? ? ? ? ? ? ? ? ? ? ? ? 全選
? ? ? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <ul class="list-group">
? ? ? ? ? ? ? ? ? ? <li class="list-group-item" v-for="(item) in list" :key="item.id">
? ? ? ? ? ? ? ? ? ? ? ? <div class="checkbox">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <label>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="checkbox" v-model="item.checked">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {{item.name}}--{{item.price}}*{{item.quantity}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <button type="button" @click="item.quantity>1?item.quantity-=1:1"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? class="btn btn-success">-</button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <button type="button" @click="item.quantity+=1" class="btn btn-success">+</button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? <p>總價(jià)：{{sumPrice}}</p>
? ? ? ? ? ? </div>
? ? ? ? </div>
</div>js
<script src="./libs/vue.js"></script>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el: "#app",
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? list: [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 1,
? ? ? ? ? ? ? ? ? ? ? ? name: "小米10",
? ? ? ? ? ? ? ? ? ? ? ? price: 3999,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 2,
? ? ? ? ? ? ? ? ? ? ? ? name: "榮耀30",
? ? ? ? ? ? ? ? ? ? ? ? price: 2999,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 3,
? ? ? ? ? ? ? ? ? ? ? ? name: "魅族17",
? ? ? ? ? ? ? ? ? ? ? ? price: 3699,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? id: 4,
? ? ? ? ? ? ? ? ? ? ? ? name: "蘋果11",
? ? ? ? ? ? ? ? ? ? ? ? price: 5499,
? ? ? ? ? ? ? ? ? ? ? ? checked: false,
? ? ? ? ? ? ? ? ? ? ? ? quantity: 1
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? },
? ? ? ? ? ? // computed計(jì)算屬性，
? ? ? ? ? ? // ?他有一個(gè)特點(diǎn)，可以依賴當(dāng)前數(shù)據(jù)改變之后進(jìn)行重新計(jì)算
? ? ? ? ? ? computed: {
? ? ? ? ? ? ? ? checkAll: {
? ? ? ? ? ? ? ? ? ? //設(shè)置值，當(dāng)點(diǎn)擊全選按鈕的時(shí)候觸發(fā)
? ? ? ? ? ? ? ? ? ? set(v) {
? ? ? ? ? ? ? ? ? ? ? ? this.list.forEach((item) => (item.checked = v))
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? //取值，當(dāng)列表中的值改變之后觸發(fā)，需要return
? ? ? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? ? ? return (
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.list.length ===
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.list.filter((item) => item.checked).length
? ? ? ? ? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //計(jì)算總價(jià)，選擇被選中的元素
? ? ? ? ? ? ? ? sumPrice() {
? ? ? ? ? ? ? ? ? ? return this.list.filter((item) => item.checked).reduce((pre, cur) => {
? ? ? ? ? ? ? ? ? ? ? ? return pre + cur.price * cur.quantity
? ? ? ? ? ? ? ? ? ? }, 0)
? ? ? ? ? ? ? ? },
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? save() {
? ? ? ? ? ? ? ? ? ? console.log(this.list.filter((item) => item.checked))
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
</script>結(jié)構(gòu)是用bootstrap寫的，記得下載并引入文件
<link rel="stylesheet" href="./bootstrap.min.css" >
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vuejs手把手教你寫一個(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)畫效果的方法詳解
- Vue實(shí)現(xiàn)購(gòu)物車詳情頁(yè)面的方法
相關(guān)文章
這篇文章主要介紹了淺談vue加載優(yōu)化策略，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
這篇文章主要介紹了vue頁(yè)面右下角添加懸浮按鈕組件的方法代碼,在Vue項(xiàng)目中,通過(guò)在頂層路由文件中添加代碼,可以實(shí)現(xiàn)頁(yè)面左下角懸浮按鈕的功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue鼠標(biāo)懸停事件，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問(wèn)題處理方法
相信大家都知道在element-ui中,el-upload可以進(jìn)行文件多選操作,下面這篇文章主要給大家介紹了關(guān)于Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問(wèn)題的處理方法,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
組合式 API 是一系列 API 的集合，使我們可以使用函數(shù)而不是聲明選項(xiàng)的方式書寫 Vue 組件，這篇文章主要介紹了什么是Vue3的組合式?API,需要的朋友可以參考下2022-06-06
Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié)
then?方法是?Promise?中?處理的是異步調(diào)用，異步調(diào)用是非阻塞式的，在調(diào)用的時(shí)候并不知道它什么時(shí)候結(jié)束，也就不會(huì)等到他返回一個(gè)有效數(shù)據(jù)之后再進(jìn)行下一步處理，這篇文章主要介紹了Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié),需要的朋友可以參考下2023-01-01
詳解vite2.0配置學(xué)習(xí)(typescript版本)
這篇文章主要介紹了詳解vite2.0配置學(xué)習(xí)(typescript版本)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了vue2路由表中異步加載組件命名方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue2.x配置路由導(dǎo)航守衛(wèi)實(shí)現(xiàn)用戶登錄和退出
之前在Vue的學(xué)習(xí)中通過(guò)路由導(dǎo)航守衛(wèi)控制實(shí)現(xiàn)了用戶登錄模塊的功能，本文基于Vue2.x進(jìn)行實(shí)現(xiàn)，在此將實(shí)現(xiàn)過(guò)程進(jìn)行記錄與總結(jié)，感興趣的可以了解一下2021-08-08
Vue3-KeepAlive,多個(gè)頁(yè)面使用keepalive方式
這篇文章主要介紹了Vue3-KeepAlive，多個(gè)頁(yè)面使用keepalive方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08