Vue2.0开发之——购物车案例-Footer组件封装-计算商品的总价格(51)
一 概述
- App.vue中计算勾选商品的总价格
- 定义子组件Footer中的商品总价格
- 将App.vue中商品的总价格传递给Footer显示
二 App.vue中计算勾选商品的总价格
2.1 商品总价格的计算逻辑
所有勾选商品的价格*数量
2.2 App.vue中通过计算属性计算总价格
通过计算属性计算总价格
computed: {//已勾选商品的总价格amt() {//1.先filter过滤//2.再reduce累加return this.list.filter((item) => item.goods_state).reduce((total, item) => (total += item.goods_price * item.goods_count),0);},},
三 定义子组件Footer中的商品总价格
3.1 再Footer中定义商品总价格amount
props: {isFull: {type: Boolean,default: false,},amount:{type:Number,default:0}},
3.2 将amount的值渲染到页面上
<div><span>合计：</span><span class="total-price">￥{{ amount.toFixed(2) }}</span>
</div>
四 将App.vue中商品的总价格传递给Footer显示
<Footer:isfull="fullState":amount="amt":all="total"@full-change="getFullState"></Footer>
五 效果图
Vue2.0开发之——购物车案例-Footer组件封装-计算商品的总价格(51)相关推荐
- 基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释 需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...
- 【Vue2.0】—github小案例（二十三）
[Vue2.0]-github小案例(二十三) <template><section class="jumbotron"><h3 class=&quo ...
- Vue学习小案例--分页组件封装
文章目录 Vue学习小案例--分页组件封装 修改成Vue(使用组件) Vue学习小案例–分页组件封装 index.html <!DOCTYPE html> <html lang=&q ...
- 【vue2.0进阶篇】用transition组件轻松实现过渡效果
Vue系列连载又继续了,公众号和微信号都接到了伙伴们的催更,最近忙于工作,没来得及时更新<Vue2.0进阶>的教程文章,大家久等了. 这一节我们来学习如何利用Vue提供的transitio ...
- 基于Vue开发的购物车案例
需求:具有增加数量.减少数量.移除书信息.计算总价等功能. HTML: <!DOCTYPE html> <html lang="en"> <head& ...
- html整合vue elementui,vue2.0结合Element-ui实战案例
前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例,后端数据接口,会使用json-server快速搭 ...
- vue-amap - 基于Vue2.0和高德地图的地图组件
为什么80%的码农都做不了架构师?>>> Github:ElemeFE/vue-amap 文档: vue-amap 前言 在做基于LBS的应用中,时常会和地图打交道,最直接的解 ...
- 基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子
直接上源码: 组件:scroll.vue,需要先npm install better-scroll <template><div ref="wrapper"> ...
- 基于Springboot + Vue2.0开发的 IM 在线聊天
1. 项目介绍 多聊Chat是一个网页版在线即时聊天项目,前端使用 Element-ui,后端采用了基于 Springboot开发的,并使用 WebSocket 服务进行消息实时推送. 目前后端 We ...
最新文章
- jquery中跳出each循环
- php mysql 框架_Medoo 轻量级的 PHP 数据库框架 - 文章
- 28行满分代码：L1-048 矩阵A乘以B (15分)
- JMeter中添加dubbo相关插件异常问题解决
- HiveQL： 数据操作
- c# 再次尝试 连接失败_手机投屏电视连接不上怎么回事？
- 3.企业安全建设入门(基于开源软件打造企业网络安全) --- 业务网安全加固
- WEB前端、后端的说明
- 数26个大写字母里带圈的字母个数
- 程序员的副业，有人做扮鬼演员月入5K，有人接私活年入80万！
- 清梦_飘云羽逸_新浪博客
- 运动健身耳机什么好？四款运动蓝牙耳机之好评
- Android相机对焦问题
- 计算机网络传输层课件,计算机网络技术,传输层协议课件
- C++小白如何入门？
- 凌华服务器装系统,cbz8000监控系统安装指南v2.3（27页）-原创力文档
- java 个人博客开发_Java实现个人博客系统
- 支撑程序员的三种精神
- 赶紧收藏 : 从15000个Python开源项目中精选的Top30
- linux下tftp32的使用