Vue: 购物车数量加减按钮

效果图：

HTML：

1 <div class="label">
2    <p class="buy_num">购买数量</p>
3    <button class="btn_minute" @click="btnMinute">-</button>
4    <input type="text" value="0" size="1" v-model="count">
5    <button class="btn_add" @click="btnAdd">+</button>
6 </div>

VUE：

 1 <script>
 2   import { Toast } from 'mint-ui'
 3   export default {
 4     name: 'detailsOfGoods',
 5     data () {
 6       return {
 7         count: 0,
 8       }
 9     },
10     methods: {
11       /*
12       * 购买数量按钮+
13       */
14       btnAdd (count) {
15         if (this.count >= 1000) {
16           Toast('该宝贝不能购买更多了~')
17         } else {
18           this.count++
19         }
20       },
21       /*
22       * 购买数量按钮-
23       */
24       btnMinute (count) {
25         if (this.count <= 0) {
26           Toast('该宝贝不能减少了哟~')
27         } else {
28           this.count -= 1
29         }
30       }
31     }
32   }
33 </script>

CSS：

 1 .label{
 2   .buy_num{
 3      display: inline;
 4      margin-right: 5.86rem;
 5   }
 6   .btn_minute{
 7      border-radius: 0.133rem 0 0 0.133rem;
 8      padding:0.146rem 0.2rem 0.146rem 0.226rem;
 9   }
10   input{
11      font-size: @fz12px;
12      padding:0.146rem 0.12rem;
13      background: #f5f5f5;
14      text-align: center;
15   }
16   .btn_add{
17      border-radius: 0 0.133rem 0.133rem 0;
18      padding:0.146rem 0.226rem 0.146rem 0.2rem;
19   }
20 }

 

转载于:https://www.cnblogs.com/Awen71815iou/p/11314160.html