070——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuex之使用getters计算每一件购物车中商品的总价</title>
<script src="vue.js"></script>
<script src="vuex.js"></script>
</head>
<body>
<div id="demo">
<Lists></Lists>
</div>
<script type="text/x-template" id="Lists">
<div>
<h1>购物车</h1>
<table border="1">
<tr>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr v-for="v in goods">
<td>{{v.id}}</td>
<td>{{v.title}}</td>
<td>{{v.price}}</td>
<td>{{v.num}}</td>
<td>{{v.totalPrice}}</td>
</tr>
</table>
<h1>总价：{{totalPrice}}</h1>
</div>
</script>
<script>
let Lists = {
template: "#Lists",
computed: {
totalPrice() {
return this.$store.getters.totalPrice;
},
goods() {
return this.$store.getters.goods;
}
}
}
let store = new Vuex.Store({
state: {
goods: [
{id: 1, title: 'ihpone7', price: 100, num: 3},
{id: 2, title: 'vivo20', price: 100, num: 2}
]
},
getters: {
//获取商品总价：
totalPrice: state => {
let totalPrice = 0;
state.goods.forEach((v) => {
totalPrice += v.num * v.price;
});
return totalPrice;
},
goods(state) {
let goods = state.goods;
goods.forEach((v) => {
v.totalPrice = v.num * v.price;
})
return goods;
}
}
});
var app = new Vue({
el: "#demo",
store,
components: {
Lists
}
});
</script>
</body>
</html>
070——VUE中vuex之使用getters计算每一件购物车中商品的总价的更多相关文章
- 071——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 文件夹中含有子文件夹，修改子文件夹中的图像存储格式（python实现）
文件夹中含有子文件夹,修改子文件夹中的图像存储格式,把png图像改为jpg图像,python代码如下: import os import cv2 filePath = 'C:\\Users\\admi ...
- 069——VUE中vuex之使用getters高效获取购物车商品总价
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 073——VUE中vuex之使用actions和axios异步初始购物车数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue实现简单的列表金额计算效果（简易购物车）
效果图: 使用技术:v-for v-bind v-on实现简单的列表选中绑定操作 代码: <!DOCTYPE html> <html> <head> <met ...
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
- vue：vuex中mapState、mapGetters、mapActions辅助函数及Module的使用
一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: index.js如下: import Vue from 'vue'; import ...
- vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...
- 074——VUE中vuex之模块化modules开发实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- JS(JavaScript)脚本库的积累
在现在互联网盛行的时代,使得B/S架构飞速发展.曾经在大学的时候我一直都梦想着毕业后要找一个像腾讯这样大企业做C/S方面的开发工作(其实现在腾讯也有很多B/S软件),因为C/S体验度非常高,感觉非常好 ...
- AndroidStudio V2.0.0.汉化
汉化包下载:http://pan.baidu.com/s/1kVKYUjH AndroidStudio V2.0.x.版汉化工作介绍 resource_en.jar------> resourc ...
- Spring的面向切面
Spring的面向切面 在应用开发中,有很多类似日志.安全和事务管理的功能.这些功能都有一个共同点,那就是很多个对象都需要这些功能.复用这些通用的功能的最简单的方法就是继承或者委托.但是当应用规模达到 ...
- springboot集成shiro 前后端分离
前后端分离情况下 首先考虑是否跨域,如果没有跨域是可以使用shiro原生的session+cookie,无需特别处理. 如果涉及到跨域则需要考虑cookie问题(本质上也是重写shiro获取JESSI ...
- java自学入门心得体会 从环境配置开始
java —— 一种可以撰写跨平台应用软件的面向对象的程序设计语言. 很多教程里都要概述java语言的诞生发明.其实像图灵的”图灵机“和”图灵测试“一样,当初的java并不是这样. 是用来操控一些电冰 ...
- DPDK无法分出大页面：EAL: No free hugepages reported in hugepages-2048kB 解决方法
参考: [dpdk-users] Fw: DPDK Error --> EAL: No free hugepages reported in hugepages-2048kB DPDK无法分出连 ...
- Spring中的用到的设计模式大全
spring中常用的设计模式达到九种,我们举例说明: 第一种:简单工厂 又叫做静态工厂方法(StaticFactory Method)模式,但不属于23种GOF设计模式之一. 简单工厂模式的实质是由一 ...
- 安装cartographer_ros
这里使用的是hitcm(张明明)的github地址,由于google官方的教程需要FQ下载一些文件,因此容易失败,经验证hitcm(张明明)对原文件进行了少许修改后可以成功安装,在他的修改中核心代码不 ...
- Springboot 如何加密，以及利用Swagger2构建Restful API
先看一下使用Swagger2构建Restful API效果图 超级简单的,只需要在pom 中引用如下jar包 <dependency> <groupId>io.springfo ...
- 团队作业Beta冲刺-第三天
2018.06.26 各个成员完成任务 成员 今日完成任务 贡献小时数 龙正圆 后台程序完善 5h 杨环宇 后台程序完善 4h 马军.龚继恒 界面美化 2h 候燕.纪亚星 Beta冲刺博客的撰写 3h ...