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