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 相关文章推荐
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
js中new一个对象的过程
Feb 20 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 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
请离开include_once和require_once
2013/07/18 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
JavaScript window.location对象
2014/11/14 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
js 将图片连接转换成base64格式的简单实例
2016/08/10 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python获得图片base64编码示例
2014/01/16 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
python 处理string到hex脚本的方法
2018/10/26 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
python单例模式的多种实现方法
2019/07/26 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
大班幼儿评语大全
2014/04/30 职场文书
美化环境标语
2014/06/20 职场文书
小学领导班子对照材料
2014/08/23 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
2015政治思想表现评语
2015/03/25 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
母亲节感言
2015/08/03 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android