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 ...
随机推荐
- centos 安装 ffmpeg
使用yum方式安装ffmpeg: 先安装Nux Dextop仓库: Nux Dextop库依赖于EPEL库,所有要先安装EPEL库(需要管理员权限). 如果安装过则跳过. $ su root $ yu ...
- 20145105 《Java程序设计》第10周学习总结
20145105 <Java程序设计>第10周学习总结 教材学习内容总结 JAVA网络编程 一.网络概述 (一)计算机网络概述 网络编程的实质就是两个(或多个)设备(例如计算机)之间的数据 ...
- P3901 数列找不同
P3901 数列找不同 题目描述 现有数列 \(A_1,A_2,\cdots,A_N\) ,Q 个询问 \((L_i,R_i)\) , \(A_{Li} ,A_{Li+1},\cdots,A_{Ri} ...
- 软件设计师真题试题&&答案
软件设计师2013上半年上午试题及答案详解 下午试题 2013下半年上午答案 试题 下午答案 试题 2014上半年上午答案 2015上半年上午答案 2016上半年上午试题
- UVa 1625 颜色的长度
https://vjudge.net/problem/UVA-1625 题意: 输入两个长度分别为n和m的颜色序列,要求按顺序合并成同一个序列,即每次可以把一个序列开头的颜色放到新序列的尾部.对于每个 ...
- 【BZOJ】4012: [HNOI2015]开店
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4012 给出一个$n$个点的树,树上每一个点都有一个值$age$,每条边都有边权,每次查询一 ...
- windows 命令行中使用winrar
加入环境变量即可 我的电脑右键属性->高级->环境变量->系统变量->编辑 变量名:path 变量值:C:/Program Files/WinRAR; --变量值为WinRAR ...
- ubuntu-server14.04 网络配置
一.启动网卡 ubuntu server 安装后,ifconfig 发现只有一个lo 和一个p1p1 网卡, 先查看服务器网卡:ifconfig -a ,发现有lo ,p1p1,p2p1,p3p1,p ...
- 哈希表-java
import java.util.HashMap; import java.util.Iterator; public class JavaHashMap { public static void m ...
- MongoDB（课时16 分页显示）
3.4.2.11 数据分页显示 在MongoDB里面的数据分页显示也是符合于大数据要求的操作函数: skip(n):表示跨过多少数据行 limit(n):取出的数据行的个数限制 范例:分页显示(比如显 ...