069——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>
<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></td>
</tr>
</table>
<h1>总价：{{totalPrice}}</h1>
</div>
</script>
<script>
let store = new Vuex.Store({
state: {
totalPrice: 100,
goods: [
{id: 1, title: 'iphone7', price: 100, num: 2},
{id: 2, title: 'vivo20', price: 200, num: 2}
]
},
getters: {
//获取商品总价：
totalPrice: state => {
let totalPrice = 0;
state.goods.forEach((v) => {
totalPrice += v.price * v.num;
})
return totalPrice;
}
}
});
let lists = {
template: '#lists',
computed: {
totalPrice() {
return this.$store.getters.totalPrice;
},
goods() {
return this.$store.state.goods;
}
}
}
new Vue({
el: "#demo",
store,
components: {
lists
} });
</script>
</body>
</html>
069——VUE中vuex之使用getters高效获取购物车商品总价的更多相关文章
- 071——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 070——VUE中vuex之使用getters计算每一件购物车中商品的总价
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
- 074——VUE中vuex之模块化modules开发实例
<!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 ...
- 072——VUE中vuex之使用mutations修改购物车仓库数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中在页面渲染完之后获取元素（否则动态渲染的元素获取不到）
两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...
随机推荐
- 20165211 学习基础和C语言调查
20165211 学习基础和C语言调查 理论脱离实践是最大的不幸.--达芬奇 达芬奇,是我眼里最有嫌疑的穿越者. 绘画.天文.雕塑.音乐.发明.建筑,数学.生理.物理.天文.地质--我很难想象有一个人 ...
- Disruptor学习笔记（一）：基本原理和概念
一.Disruptor基本原理 在多线程开发中,我们常常遇到这样一种场景:一些线程接受用户请求,另外一些线程处理这些请求.比如日志处理中的日志输入和告警.这种典型的生产者消费者场景十分常见,而生产者消 ...
- C++中两个类中互相包含对方对象的指针问题(转载)
出处:http://www.cnblogs.com/hanxi/archive/2012/07/25/2608068.html // A.h #include "B.h" clas ...
- TCP客户端【TcpClient】
一.阻塞模式 1.命名空间 System.Net.Sockets 2.对象声明 TcpClient dpu1TcpClient = null;//dpu1tcp客户端,TcpClient模式 Netw ...
- 如何修改ls命令列出来的目录颜色
答:默认为蓝色,在黑色背景下无法看清楚,因此以以下方法修改; 1.往~/.bash_profile文件中添加以下内容: export LS_COLORS='no=00:fi=00:di=01;33:l ...
- SQL NULL
表 select CHARACTER_MAXIMUM_LENGTH from information_schema.columns where table_name= 'Alliance' selec ...
- 第七章 对称加密算法--DES
注意:本节内容主要参考自<Java加密与解密的艺术(第2版)>第7章“初等加密算法--对称加密算法” 7.1.对称加密算法 特点: 加密与解密使用同一个密钥 是使用最广的算法 常见对称加密 ...
- 事务（Transaction）
1.演示转账的功能:(1)创建一张表示学生表表 CREATE TABLE student( id INT PRIMARY KEY AUTO_INCREMENT,name VARCHAR(50), ac ...
- Kylin介绍
转:http://blog.csdn.net/yu616568/article/details/48103415 Kylin是ebay开发的一套OLAP系统,与Mondrian不同的是,它是一个MOL ...
- BZOJ 1009: [HNOI2008]GT考试（kmp+dp+矩阵优化）
http://www.lydsy.com/JudgeOnline/problem.php?id=1009 题意: 思路:真的是好题啊! 对于这种题目,很有可能就是dp,$f[i][j]$表示分析到第 ...