071——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">
<footer-cart></footer-cart>
<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>
<input type="text" v-model="v.num">
</td>
<td>{{v.totalPrice}}</td>
</tr>
</table> </div>
</script>
<script type="text/x-template" id="footerCart">
<div>
总计：{{totalPrice}}
</div>
</script>
<script>
let Lists = {
template: "#Lists",
computed: {
goods() {
return this.$store.getters.goods;
}
}
}
let footerCart = {
template: "#footerCart",
computed: {
totalPrice() {
return this.$store.getters.totalPrice;
}
}
}
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,footerCart
}
});
</script>
</body>
</html>
071——VUE中vuex之使用getters计算每一件购物车中商品的总价的更多相关文章
- 070——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 ...
随机推荐
- 20145106 《Java程序设计》第10周学习总结
教材学习内容总结 什么是计算机网络? 计算机网络,是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享 ...
- React 回忆录（二）为什么使用 React？
Hi 各位,欢迎来到 React 回忆录!
- linux下精确替换某个字符串
1.linux下精确替换某个字符串 sed -i 's/\<old\>/new/g' filename.txt 2.举例: 2.1有个文件名为filename.txt,内容如下: newd ...
- luogu P2680 运输计划 65分做法
临近\(noip,AK\)不太现实,暴力才是王道,大佬无视 这里只介绍\(65\)分做法 ① \(m==1\) 的情况 很明显 就一条路径,当然要贪心选着一条路径路上的最大的边喽 傻逼分\(get 2 ...
- Maximum GCD （stringstream）题解
Given the N integers, you have to find the maximum GCD (greatest common divisor) of every possiblepa ...
- 网络压缩论文整理(network compression)
1. Parameter pruning and sharing 1.1 Quantization and Binarization Compressing deep convolutional ne ...
- [loss]Triphard loss优雅的写法
之前一直自己手写各种triphard,triplet损失函数, 写的比较暴力,然后今天一个学长给我在github上看了一个别人的triphard的写法,一开始没看懂,用的pytorch函数没怎么见过, ...
- shiro的简单入门使用
这里只是测试登录认证,没有web模块,没有连接数据库,用户密码放在shiro.ini配置中,密码没有加密处理,简单入门. 基于maven 先看目录结构 测试结果 pom.xml <?xml ve ...
- 深度优先搜索之小z的房子与验证码识别
题目:小z的房子 高级语言程序设计实践题目:2.4 小z 的房子 ★实验任务 小z 通过自己的努力,终于发家致富.现在小明有一个大小为N*M 的 院子,雨后积起了水.四联通的积水被认为是连接在一起的. ...
- hdoj上的一题和程序设计第二次作业的拓展-人见人爱a+b
hdoj上一道有意思的题目,题目: 人见人爱a+b 敲的也蛮快的,大概十分钟左右就AC了.代码如下: 人见人爱a+b #include<stdio.h> int main() { int ...