<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>

<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 style="margin-right: 20px">{{total}}元</strong>
  最貴的單價是：<em>{{bestValue}}元</em>
 </p>
</div>