效果图:

HTML:

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

VUE:

methods: {
  /*
  * 购买数量按钮+
  */
  btnAdd (count) {
   // 如果是低价商品,则限购
  if (this.vegas_id) {
   Toast('优惠商品限购一件哦~')
  } else {
    // 如果数量大于商品库存
   if (this.count >= this.stock) {
   Toast('该宝贝不能购买更多了~')
  } else {
  this.count++
  }
  }
  },
  /*
  * 购买数量按钮-
  */
  btnMinute (count) {
  if (this.count <= 1) {
   Toast('该宝贝不能减少了哟~')
  } else {
   this.count--
  }
  }
}

Vue: 购物车数量加减按钮的更多相关文章

  1. 购物车数字加减按钮HTML+CSS+JS(有需要嫌麻烦的小伙伴拿走不谢)

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

  2. web框架实现购物车数量加减

    企业开发中经常是团队协作,每个人分配一个小的模块,比如说购物车模块,数量加减这一块人们首先想到的就是通过jquery实现,其实作为一个后端接口开发的程序猿也可以用自己更擅长的后端的逻辑代码来实现,那我 ...

  3. js jquery 权限单选 bug修改以及正确代码 购物车数量加减

    效果图废话不多直接上代码 用的avalon渲染,其实都是一样的 <div class="shop-arithmetic"> <a href="javas ...

  4. 初学Vue之数量加减

    效果图: HTML: <div class="count3"> <ul> <li v-for="(key,idx) in liList&qu ...

  5. js实现购买数量加减效果

    写在前面:当我们需要在多个页面都有操作数量的需求时的一种解决方案 结构: js代码: <script type="text/javascript"> function ...

  6. js实现输入框数量加减【转】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 自己动手丰衣足食之 jQuery 数量加减插件

    引言 做一个手机端的订单相关项目中,其中下订单时需要用到数量加减的控件,可以设置默认值,也可以设置最大值和最小值.使用jQuery这么长时间了,平时很少去编写属于自己的插件,现在编写的时候对立面的一些 ...

  8. Android 自定义控件 EditText输入框两边加减按钮Button

    自己封装的一个控件:EditText两边放加减按钮Button来控制输入框的数值 Demo 下载地址: 第一版:http://download.csdn.net/detail/zjjne/674086 ...

  9. 纯CSS样式实现数字加减按钮的最佳方案

    前言: 对于数字加减按钮的实现,以前用过不少方案,诸如: 1.使用背景图片——这种效果比较好,缺点是样式控制有点复杂了,还需要使用图片: 2.直接使用“+”“-”——这种方法简单粗暴,最容易实现,缺点 ...

随机推荐

  1. ARC099E. Independence

    考虑一个子问题.给定无向图 $G$,如何判断能否将 $G$ 的点集分成两部分 $S$.$T$ 使得 $S$ 和 $T$ 导出的子图都是完全图? 这个问题把我难住了.解法是考虑 $G$ 的补图 $G'$ ...

  2. table+ajax加载数据

    //ajax加载notice $(function() { //${pageContext.request.contextPath}/ /** var res = [ {noticeTitle:'必答 ...

  3. PAT B1015A1062德才论(25)

    题目描述 宋代史学家司马光在<资治通鉴>中有一段著名的"德才论":"是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取人之术,苟不得 ...

  4. 【动态规划】Mathematical Curse

    [来源]:2018年焦作网络赛B [题意]: 有n个数字,有m个符号运算.通过不回头(即选取m个数有顺序可言),消除巫术的,并达到最大的价值. 其实意思就是在数组里选取一段子序列,然后进行m次加减乘除 ...

  5. Jmeter之正则表达式取样器~案例详解

    正则:按照规则提取数据 场景:A请求获得的响应数据,需要作为B请求的提交数据(eg:A:购物车页面→B:下单(正则提取购物车的商品信息,数量信息等)) 常用正则表达式:(.+?) 辅助:添加Debug ...

  6. web框架链接

    django系列教程(优):https://www.cnblogs.com/feixuelove1009/p/5823135.html

  7. 基于C#开发的扩展按钮控件

    最近在准备一套自定义控件开发的课程,下面将第一个做的按钮控件分享给大家. 其实这个控件属于自定义控件中的扩展控件,与组合控件和GDI+开发的控件不同,这个控件是继承原生的Button, 这个控件的目的 ...

  8. 解决VS2015 不能设置下面的断点**** 断点未能绑定

    解决VS2015   不能设置下面的断点**** 断点未能绑定 1. 清理解决方案  ,  重新生成解决方案 ,  无效!! 2. 选项-- 调试 -- 启用编辑并继续     无效!! 3.   启 ...

  9. 在vue-cli项目中使用bootstrap

    1.安装插件 npm install jquery --save npm install bootstrap --save npm install popper.js --save 2.配置webpa ...

  10. Centos搭建hexo教程

    hexo文档:https://hexo.io/zh-cn/ 1.安装Git # sudo yum install git-core// 查看版本# git version// 输出git versio ...