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

這篇文章給大家分享的是有關(guān)vue如何實(shí)現(xiàn)購(gòu)物車(chē)總價(jià)計(jì)算的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(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 >{{total}}元</strong>
  最貴的單價(jià)是：<em>{{bestValue}}元</em>
 </p>
</div>

vue是什么

Vue是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)復(fù)雜的單頁(yè)應(yīng)用。

感謝各位的閱讀！關(guān)于“vue如何實(shí)現(xiàn)購(gòu)物車(chē)總價(jià)計(jì)算”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！