vue如何實現購物車總價計算

這篇文章給大家分享的是有關vue如何實現購物車總價計算的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

效果如下所示：

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, //總價
    bestValue:0 //最貴單價
   },
   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;//臨時總價
     var best = 0;//臨時最大單價
     this.myList.forEach(function (val,index) {
      totalPrice += val.number*val.price;//累計總價
      //判斷最大單價
      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)"/>
   單價：<em>{{item.price}}</em>
   小計：<span>{{item.number*item.price}}</span>
  </li>
 </ul>
 <p id="p">
  總價：<strong >{{total}}元</strong>
  最貴的單價是：<em>{{bestValue}}元</em>
 </p>
</div>

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

感謝各位的閱讀！關于“vue如何實現購物車總價計算”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！