vue.js
https://cn.vuejs.org/v2/guide/
簡單購物車
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> table { border: 1px solid black; } table { width: 100%; border-spacing: 0; } th { background-color: #ddd; } th, td { border-bottom: 1px solid #ddd;height: 50px;text-align:center; } .red { color: red } .green { color: green } </style> </head> <body> <div id="app"> <table> <tr> <th>序號</th> <th>商品名稱</th> <th>商品價格</th> <th>購買數量</th> <th>操作</th> </tr> <tr v-for="iphone in PJson"> <td>{{ iphone.id }}</td> <td>{{ iphone.name }}</td> <td class="red">￥{{ iphone.price }}</td> <td> <button v-bind:disabled="iphone.count == 1" v-on:click="iphone.count-=1" v-bind:class="{green:iphone.count>1,red:iphone.count==1}">-</button> {{ iphone.count }} <button v-bind:disabled="iphone.count == 9" v-on:click="iphone.count+=1" v-bind:class="getBtnClass(iphone.count)">+</button> </td> <td> <button v-on:click="del($index)">移除</button> </td> </tr> </table> <p> 說明：滿100包郵，每個商品限購9件 </p> <p> <span class="red">總價：￥{{totalPrice()}}</span> <span class="green" v-if="totalPrice()>0" v-show="youfei>0">（含郵費￥{{youfei}}）</span> <span class="green" v-show="youfei==0">（包郵）</span> </p> </div> <script> var app = new Vue({ el: '#app', data: { youfei: 10, PJson: [ { id: 1, name: 'iphone1', price: 10, count: 1 }, { id: 2, name: 'iphone2', price: 20, count: 1 }, { id: 3, name: 'iphone3', price: 30, count: 1 }] }, computed: { //寫在methods裏也可以的 getBtnClass(){ return function(num) { return{green:num<9,red:num==9} } } }, /*computed: { youhui:function(){ return 100 } },*/ methods: { del: function (ii) { this.PJson.splice(ii, 1); }, totalPrice: function () { var totalP = 0; for (var i = 0, len = this.PJson.length; i < len; i++) { totalP += this.PJson[i].price * this.PJson[i].count; } if (totalP >= 100) { this.youfei = 0 } else { this.youfei = 10 } if (totalP > 0) { return totalP + this.youfei; } return 0; }, getBtnClass2:function(num) { return{green:num<9,red:num==9} } } })</script> </body> </html>