vue.js购物车
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>?
轉載于:https://www.cnblogs.com/webapi/p/10584587.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
- 上一篇： leecode第二十一题（合并两个有序链
- 下一篇： vue计算属性的缓存和方法调用的有什么区