vue做购物车
寫一點廢話，昨天敲代碼找bug,找了好久都沒找到，后來一哥們找到他說，找代碼的bug就像男女朋友吵架，女問男你錯了沒，男說錯啦，女再問錯哪了，男傻眼了不知道錯哪。在找代碼的過程中一直知道我錯啦就是找不到錯哪了，哈哈~~~~~~
正文
用vue知識點做購物車，
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./bootstrap.min.css"><title>computed屬性實現購物車</title><style>body{padding-top:100px;text-align:center;}thead>tr>td{font-weight:bold;}.num,.total{display:inline-block;width: 120px;}</style> </head> <body><div class="container"><table class="table table-hover table-bordered table-striped"><thead><tr><td>商品名稱</td><td>商品價格</td><td>商品數量</td><td>小計</td></tr></thead><tbody><tr v-for="(item,index) in products"><td>{{item.name}}</td><td>{{item.price}}</td><td><button @click="decrease(index)">-</button><span class="num">{{item.num}}</span><button @click="increse(index)">+</button></td><td><span class="total">{{item.price*item.num}}</span></td></tr></tbody><tfoot><tr><td colspan="4" class="text-right">總價：{{total}}</td></tr></tfoot></table></div><script src="vue.js"></script><script>new Vue({el:".container",data:{products:[{name:"TV",price:2300,num:1},{name:"洗衣機",price:1500,num:1},{name:"拖鞋",price:20,num:2},{name:"iphone",price:9800,num:1}]},methods:{increse(index){this.products[index].num++},decrease(index){if(this.products[index].num===1)returnthis.products[index].num--}},computed:{total(){var sum=0;this.products.forEach(function(item){sum+=item.price*item.num;})return sum;}}})</script> </body> </html>轉載于:https://www.cnblogs.com/DCL1314/p/7774297.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
- 上一篇： java线程之线程通信控制
- 下一篇： Vue2.0增删改查案例（Vue+Les