vue.js购物车添加商品组件的方法


Posted in Javascript onSeptember 17, 2019

现实向购物车添加商品组件

代码

<template>
<div class="cartcontrol">
 <!--商品减一区域-->
 <div class="reduce" v-show="food.count>0">
  <i class="icon-remove_circle_outline"></i>
 </div>
 <!--商品数量区域-->
 <div class="num" v-show="food.count>0">4</div>
 <!--商品加一区域-->
 <div class="add" @click="addCart">
  <i class="icon-add_circle"></i>
 </div>
</div>
</template>
<script>
export default {
  name: "Cartcontrol",
  props:{
    food:{
      type:Object
    }
  },
  methods:{
    //添加购物车商品数量
    addCart(ele){
      if(!ele._constructed){
        //better-scroll的派发事件scroll的event和pc端浏览器的点击事件的event有个
        // 属性区别_constructed,pc端浏览器的点击事件的event中是没有这个属性的
        return;
      }
      //一开始food中是没有商品数量count
      if(!this.food.count){
        // this.food.count = 1;count不是food对象中的属性,直接这样写,在dom渲染的时候是无法感应到count的变化
        this.$set(this.food,'count',1);
      }else{
        this.food.count++;
      }
      console.log(this.food.count);
    }
  }
}
</script>
<style scoped lang="stylus">

.cartcontrol

display flex
height .48rem
align-items center
.num
  font-size.2rem
  width .48rem
  text-align center
  color rgb(147,153,159)
.reduce,.add
  font-size .4rem
  color rgb(0,160,220)
</style>

对象中添加新的属性,如果更新此属性的值,是不会更新视图的

addCart(ele){
if(!ele._constructed){
        //better-scroll的派发事件scroll的event和pc端浏览器的点击事件的event有个
        // 属性区别_constructed,pc端浏览器的点击事件的event中是没有这个属性的
        return;
      }
      //一开始food中是没有商品数量count
      if(!this.food.count){
        this.food.count = 1;count不是food对象中的属性,直接向food添加新属性count,
        // 当count值发生变化的时候在dom渲染的时候是无法感应到count的变化
      }else{
        this.food.count++;
      }
      console.log(this.food.count);
    }

解决方法:使用$set可以触发更新视图,这样当count发生变化的时候,$set去触发更新视图 addCart(ele){

if(!ele._constructed){
        //better-scroll的派发事件scroll的event和pc端浏览器的点击事件的event有个
        // 属性区别_constructed,pc端浏览器的点击事件的event中是没有这个属性的
        return;
      }
      //一开始food中是没有商品数量count
      if(!this.food.count){
        // this.food.count = 1;count不是food对象中的属性,直接向food添加新属性count,
        // 当count值发生变化的时候在dom渲染的时候是无法感应到count的变化
        this.$set(this.food,'count',1);
      }else{
        this.food.count++;
      }
      console.log(this.food.count);
    }

总结

以上所述是小编给大家介绍的vue.js购物车添加商品组件的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
ES5新增数组的实现方法
May 12 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 #Javascript
Vue的生命周期操作示例
Sep 17 #Javascript
小程序两种滚动公告栏的实现方法
Sep 17 #Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 #Javascript
react native 仿微信聊天室实例代码
Sep 17 #Javascript
Vue 自定义指令功能完整实例
Sep 17 #Javascript
JS扁平化输出数组的2种方法解析
Sep 17 #Javascript
You might like
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
PHP常用的三种设计模式
2017/02/17 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
js loading加载效果实现代码
2009/11/24 Javascript
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
pyv8学习python和javascript变量进行交互
2013/12/04 Python
详解Django中的权限和组以及消息
2015/07/23 Python
django rest framework 自定义返回方式
2020/07/12 Python
Python实现异步IO的示例
2020/11/05 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
个人自我剖析材料
2014/02/07 职场文书
经典婚礼主持词
2014/03/13 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
nginx请求限制配置方法
2021/07/09 Servers
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL