效果图:

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. 链表操作Java实现

    单链表 存储结构 public class ListNode { int i; ListNode next; ListNode(int i) { this.i = i; } public String ...

  2. Netty对常用编解码的支持

    参考文献:极客时间傅健老师的<Netty源码剖析与实战>Talk is cheap.show me the code! Netty对编解码的支持 打开Netty的源码,它对很多的编码器都提 ...

  3. 华为设备ACL与NAT技术

    ACL 访问控制列表(Access Control Lists),是应用在路由器(或三层交换机)接口上的指令列表,用来告诉路由器哪些数据可以接收,哪些数据是需要被拒绝的,ACL的定义是基于协议的,它适 ...

  4. 并不对劲的CF1237D&E:Balanced Playlist and Binary Search Trees

    CF1237D Balanced Playlist 题意 有一个长度为\(n\)(\(n\leq 10^5\))的循环播放歌单,每首歌有一个优秀值\(a_i\)(\(a_i\leq 10^9\)). ...

  5. Lua 打印 table (支持双向引用的table)

    网上搜了一下,挺多打印table的方案,基本思路都是一层一层递归遍历table.(我就是参考这种思路做的^_^) 但大部分都不支持双向引用的打印.我所指的双向引用,就是a引用b, b又直接或间接引用a ...

  6. 如何配置数据库镜像<一>

    一.简介 “数据库镜像”是Sql Server 2005推出的一个主要用于提高数据库可用率的软件解决方案.镜像是基于每个数据库执行的,仅适用于使用完整恢复模式的数据库.简单恢复模式和大容量日志恢复模式 ...

  7. 【原创】大数据基础之Kudu(4)spark读写kudu

    spark2.4.3+kudu1.9 1 批量读 val df = spark.read.format("kudu") .options(Map("kudu.master ...

  8. JS基础_while的练习2

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. 7.Struts2拦截器及源码分析

    1.Struts2架构图 2.Struts2 执行过程分析 1.首先,因为使用 struts2 框架,请求被Struts2Filter 拦截 2.Struts2Filter  调用 DisPatche ...

  10. WinForm - 不用自绘实现仿QQ2013

    素材啥的都是一手整理的,绝对的原创.这是13年做的,虽然是个老项目了,可里面涉及的winform技术不会过时,所以就拿出来重温探讨下技术要点. 没使用任何自绘命令,可以说是非常容易理解与学习的. 效果 ...