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 ...
随机推荐
- csharp编写界面，opencv编写类库，解决 Pinvoke过程中的参数传递和平台调用问题
使用csharp 编写winform程序,不仅速度快,而且容易界面美化并找到其他类库的支持:而使用 opencv编写图形图像处理程序,是目前比较流行,而且高效的一种方法.如果需要将两者结合,需 ...
- Python3基础 str while+iter+next 字符串的遍历
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- HDU1043 Eight（八数码：逆向BFS打表+康托展开）题解
Eight Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Sub ...
- POJ 2785 4 Values whose Sum is 0 （二分）题解
思路: 如果用朴素的方法算O(n^4)超时,这里用折半二分.把数组分成两块,分别计算前后两个的和,然后枚举第一个再二分查找第二个中是否有满足和为0的数. 注意和有重复 #include<iost ...
- redis linux版本自定义安装目录、注册服务、自启动设置、一台计算机安装多个redis
自定义安装目录并安装 1.mkdir /usr/local/redis 2.下载redis到 /usr/local/src/,解压,进入解压后的目录 3.安装到指定目录 make PREFIX=/us ...
- React Native控件之Picker
1. import React,{Component}from 'react'; import { AppRegistry, StyleSheet, Text, View, Picker, } fro ...
- WiscKey: Separating Keys from Values in SSD-Conscious Storage [读后整理]
WiscKey: Separating Keys from Values in SSD-Conscious Storage WiscKey是一个基于LSM的KV存储引擎,特点是:针对SSD的顺序和随机 ...
- 《剑指offer》第十一题（旋转数组的最小数字）
// 面试题:旋转数组的最小数字 // 题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. // 输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如数组 // {3, ...
- （转帖整理）Linux下的Autoconf和AutoMake(理论篇) 1
在搜索网上资料过程中,这是感觉最简洁有效的一篇文章,特进行转帖记录,并根据情况对部分内容进行了修改.原帖传送门:Linux下的Autoconf和AutoMake 1.工具安装在开始使用autoconf ...
- 2018年全国多校算法寒假训练营练习比赛（第一场）E 恋与程序员
https://www.nowcoder.com/acm/contest/67/E 思路: dfs 代码: #include<bits/stdc++.h> using namespace ...