vue.js如何實現購物車加減操作
阿新 • • 發佈：2018-12-07
vue.js如何實現購物車加減操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/css.css"> <script src="js/vue.js"></script> <title>Vue</title> </head> <body> <div id="app"> <div class="hd"> <span> <input type="checkbox" id="selectAll" v-model="cheackValue" /> <label for="selectAll">全選</label> </span> <span>商品名稱</span> <span>單價</span> <span>數量</span> <span>小計</span> <span>操作</span> </div> <div class="goods-list"> <div class="check-btn"><input type="checkbox"></div> <div class="goods-img"><img src="img/canon.jpg" alt=""></div> <div class="goods-name"><em>AOC 23英寸IPS顯示器</em></div> <div class="goods-price"><em>￥150.00</em></div> <div class="goods-quantity"> <button v-on:click="subtract()">-</button> <input type="text" value="0" v-model="count"> <button v-on:click="add()">+</button> </div> <div class="goods-subtotal"><em>￥0.00</em></div> <div class="goods-operate"><a href="javascript:void(0)">刪除</a></div> </div> <div class="clearing"> <span><a href="javascript:void(0)">刪除選中的商品</a></span> <span>已選擇<em>1</em>件商品</span> <span>總價：￥<em>0.00</em></span> <span><a href="#">去結算</a></span> </div> </div> </body> </html>
<script> var vm = new Vue({ el: "#app", data: { count: 0 }, methods: { //實現數字增加 add: function(count) { this.count++; }, //數字減少，如果少於0則彈出不能再少 subtract: function(count) { if (this.count <= 0) { alert("不能少了") } else { this.count -= 1; } } } }); </script>