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 04 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
如何在一个页面显示多个百度地图
Apr 07 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
浅析ThinkPHP的模板输出功能
2014/07/01 PHP
CI框架Session.php源码分析
2014/11/03 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
详解vue表单——小白速看
2018/04/08 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
python爬取个性签名的方法
2018/06/17 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
军训生自我鉴定范文
2013/12/27 职场文书
班组长安全职责
2014/01/05 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
2015年乡镇食品安全工作总结
2015/10/22 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle