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 ...
随机推荐
- 20145104张家明 《Java程序设计》第9周学习总结
20145104张家明 <Java程序设计>第9周学习总结 教材学习内容总结 第16章 -撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找. -JDBC目的:让Java ...
- goole机器学习视频链接【学习笔记】
作者:庄泽彬 说明:在youtu上观看的google的机器学习相关的视频,如何fangqiang请自己解决 机器学习简介:https://www.youtube.com/watch?time_cont ...
- git如何生成指定两个commit之间的补丁
答:git format-patch <base commit id>..<latest commit id> 如git log输出以下内容: commit 2222222 y ...
- 第十一章 非对称加密算法--DH
注意:本节内容主要参考自<Java加密与解密的艺术(第2版)>第8章“高等加密算法--非对称加密算法” 11.1.非对称加密算法 特点: 发送方和接收方均有一个密钥对(公钥+私钥),其中公 ...
- caffe深度学习网络(.prototxt)在线可视化工具：Netscope Editor
http://ethereon.github.io/netscope/#/editor 网址:http://ethereon.github.io/netscope/#/editor 将.prototx ...
- 关于iBatis配置xml文件时出现中文注释出错的一个问题（很坑爹.）
才开始我没有使用SqlMap.properties来配置连接信息.所以直接用ctrl + shift + C然后往里面添加的中文注释 例: <!-- 注释--> 运行的时候报: Error ...
- Python day13文件的读写
# 文件操作 f=open("E:\\1.txt",encoding="GBK")#打开文件 print(f.writable())#是否可写 print(f. ...
- django关系类型字段
一.多对一(ForeignKey) 多对一的关系,通常被称为外键.外键字段类的定义如下: class ForeignKey(to, on_delete, **options)[source] 外键需要 ...
- ViewPager 如何得到当前的Fragment （使用FragmentPagerAdapter）
使用FragmentPagerAdapter时,难免要在MainActivity 和 当前显示的Fragment间传递数据.但是FragmentPagerAdapter并没有给我们提供类似getCur ...
- Android之EventBus1.0 和EventBus3.0的使用详解
当Android项目越来越庞大的时候,应用的各个部件之间的通信变得越来越复杂,那么我们通常采用的就是Android中的解耦组件EventBus.EventBus是一款针对Android优化的发布/订阅 ...