效果图:

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. linux + qt 环境搭建

    下载地址 install qt huqian@huqian-Lenovo-IdeaPad-Y400:~/XRF$ ls qt-opensource-linux-x64-.run SourceFile ...

  2. ale.js 对比其他框架

    欢迎!我们相信你来这里的目的就是为了解 Ale 与其他大型框架的区别,这也正是我们想要在此回答的. 客观来说,作为 Ale 的核心开发者,我们肯定会更偏爱 Ale,认为对于某些问题来讲用 Ale 解决 ...

  3. nginx部署vue前端,刷新出现404或者500错误的解决方案

    在nginx配置文件的server下加上 try_files $uri $uri/ /index.html; 不加的话是404,路径错误是500,这里的路径只要照着/index.html就行,不用加上 ...

  4. iframe父子页面通信

    一.同域下父子页面的通信 1.父页面调用子iframe页面 (1)通过iframe的Id获取子页面的dom,然后通过内置属性contentWindow取得子窗口的window对象,此方法兼容各个浏览器 ...

  5. C 中 char、signed char 和 unsigned char 的区别

    C 中 char.signed char 和 unsigned char 的区别 来源:http://bbs.chinaunix.net/thread-889260-1-1.html 参考:https ...

  6. Intellij Idea 建立maven项目 报错 :java: 错误: 不支持发行版本 5

    百度一搜这个错误,好多人都遇到了 不计其数的人都遇到.网上大多数都是菜鸟的愚见.经过本人的测试发现,用Idea建立普通的Java项目 然后随便建立一个类运行就不会报错. 但是如果用Idea建立一个普通 ...

  7. vim insert VISUAL模式无法右键复制问题(转)

    转自:https://blog.csdn.net/coder_oyang/article/details/89096219 vim中使用鼠标右键粘贴,失败.vim的模式: 网上解法: 1. 普通模式下 ...

  8. GitHub使用--01

    1.Git下载与安装 Git网站下载地址https://git-scm.com/downloads 2.本地Git使用 在存储代码仓库的文件夹下右键 git bash here 初始化仓库 git i ...

  9. vue 项目中如何在页面刷新的状态下保留数据

    1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...

  10. 非JAVA WEB项目提供Http接口调用实现

    package com.monitor.app.utils; import com.alibaba.fastjson.JSON; import com.google.gson.Gson; import ...