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面向对象扩展库代码分享
Mar 27 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
Jul 10 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
关于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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
react native实现往服务器上传网络图片的实例
2017/08/07 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
微信小程序生成二维码的示例代码
2019/03/29 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
Python中工作日类库Busines Holiday的介绍与使用
2017/07/06 Python
python回调函数中使用多线程的方法
2017/12/25 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
python实现经典排序算法的示例代码
2021/02/07 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
送给他或她的礼物:FUN.com
2018/08/17 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
介绍一下Python下range()函数的用法
2013/11/07 面试题
城市精细化管理实施方案
2014/03/04 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
react 路由Link配置详解
2021/11/11 Javascript