快捷導(dǎo)航

vue 實(shí)現(xiàn)購(gòu)物車(chē)總價(jià)計(jì)算

更新時(shí)間：2019年11月06日 17:16:25 作者：hsnii

今天小編就為大家分享一篇vue 實(shí)現(xiàn)購(gòu)物車(chē)總價(jià)計(jì)算，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

效果如下所示：

js

<script type="text/javascript">

 window.οnlοad=function () {
  var vm = new Vue({
   el:'#huo',
   data:{
    myList:[
     {
      number:0,
      price:23
     },
     {
      number:0,
      price:14.5
     },
     {
      number:1,
      price:8
     },
     {
      number:0,
      price:20
     }
    ],
    total:0, //總價(jià)
    bestValue:0 //最貴單價(jià)
   },
   methods:{
    //相減
    sub:function (item) {
     item.number--;
     if(item.number <= 0){
      item.number = 0
     }
     this.count()
    },
    //相加
    add:function (item) {
     item.number++;
     this.count()
    },
    count:function () {
     var totalPrice = 0;//臨時(shí)總價(jià)
     var best = 0;//臨時(shí)最大單價(jià)
     this.myList.forEach(function (val,index) {
      totalPrice += val.number*val.price;//累計(jì)總價(jià)
      //判斷最大單價(jià)
      if(val.price>best && val.number>0){
       best = val.price
      }
     });
     this.total =parseFloat(totalPrice);
     this.bestValue = parseFloat(best);
    }
   },
   created:function(){ 
    this.count();
   }
  })
 }

</script>

html

<div id="huo">
 <ul id="list">
  <li v-for="item in myList">
   <input type="button" value="-" @click="sub(item)"/>
   <strong>{{item.number}}</strong>
   <input type="button" value="+" @click="add(item)"/>
   單價(jià)：<em>{{item.price}}</em>
   小計(jì)：<span>{{item.number*item.price}}</span>
  </li>
 </ul>
 <p id="p">
  總價(jià)：<strong style="margin-right: 20px">{{total}}元</strong>
  最貴的單價(jià)是：<em>{{bestValue}}元</em>
 </p>
</div>

以上這篇vue 實(shí)現(xiàn)購(gòu)物車(chē)總價(jià)計(jì)算就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue 動(dòng)態(tài)給每個(gè)頁(yè)面添加title、關(guān)鍵詞和描述的方法
這篇文章主要介紹了vue 動(dòng)態(tài)給每個(gè)頁(yè)面添加title、關(guān)鍵詞和描述的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-08-08
vue使用video插件vue-video-player的示例
這篇文章主要介紹了vue使用video插件vue-video-player的示例，幫助大家更好的理解和使用vue插件，感興趣的朋友可以了解下
2020-10-10
vue-calendar-component 封裝多日期選擇組件的實(shí)例代碼
這篇文章主要介紹了vue-calendar-component 封裝多日期選擇組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-12-12
在nuxt使用vueX代替storage的實(shí)現(xiàn)方案
這篇文章主要介紹了在nuxt使用vueX代替storage的實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue3中g(shù)etCurrentInstance獲取組件實(shí)例踩坑詳細(xì)記錄
getCurrentInstance()是Vue.js3?Composition?API中的一個(gè)函數(shù),它的作用是獲取當(dāng)前組件的實(shí)例對(duì)象,下面這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance獲取組件踩坑的相關(guān)資料,需要的朋友可以參考下
2024-02-02
Vue響應(yīng)式原理與虛擬DOM實(shí)現(xiàn)步驟詳細(xì)講解
在Vue中最重要、最核心的概念之一就是響應(yīng)式系統(tǒng)。這個(gè)系統(tǒng)使得Vue能夠自動(dòng)追蹤數(shù)據(jù)變化，并在數(shù)據(jù)發(fā)生變化時(shí)自動(dòng)更新相關(guān)的DOM元素。本文將會(huì)探討Vue響應(yīng)式系統(tǒng)的實(shí)現(xiàn)原理及其底層實(shí)現(xiàn)
2023-03-03
vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue+element-ui+sortable.js實(shí)現(xiàn)表格拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue中銷(xiāo)毀定時(shí)器的幾種解決方案
這篇文章主要給大家介紹了關(guān)于vue中銷(xiāo)毀定時(shí)器的幾種解決方案,銷(xiāo)毀定時(shí)器的操作一般是在beforeDestroy鉤子中進(jìn)行，根據(jù)定時(shí)器的數(shù)量不同可以有多種解決方法,需要的朋友可以參考下
2023-08-08
Vue3組件傳參的多種方式小結(jié)
這篇文章主要介紹 Vue3組件傳參的方式,包括父子組件、跨層級(jí)組件、兄弟組件的傳參,如父子組件通過(guò)屬性綁定和自定義事件雙向傳參,跨層級(jí)組件可利用 Provide/Inject 機(jī)制和 Pinia 狀態(tài)管理,兄弟組件可通過(guò)父組件中轉(zhuǎn)或 mitt 庫(kù)直接傳參,需要的朋友可以參考下
2025-01-01
Vue3+Canvas實(shí)現(xiàn)坦克大戰(zhàn)游戲(二)
本文主要給大家講解一下子彈擊中物體、物體銷(xiāo)毀、敵方坦克構(gòu)建生成、運(yùn)動(dòng)算法、爆炸效果、以及障礙物的生成，感興趣的小伙伴可以了解一下
2022-03-03