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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
javascript数组的扩展实现代码集合
Jun 01 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 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
第七节 类的静态成员 [7]
2006/10/09 PHP
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
再论Javascript的类继承
2011/03/05 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
Python实现的爬虫功能代码
2017/06/24 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
数控专业应届生求职信
2013/11/27 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
满月酒主持词
2014/03/27 职场文书
公司承诺书怎么写
2014/05/24 职场文书
狂人日记读书笔记
2015/06/30 职场文书
运动会100米加油稿
2015/07/21 职场文书
MySQL 如何设计统计数据表
2021/06/15 MySQL
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
TypeScript 内置高级类型编程示例
2022/09/23 Javascript