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 ...
随机推荐
- 20145105 《Java程序设计》实验四总结
实验四 Android开发基础 一.实验内容 基于Android Studio开发简单的Android应用并部署测试 了解Android组件.布局管理器的使用: 掌握Android中事件处理机制 二. ...
- 20145336 张子扬 《网络对抗技术》web基础
20145336张子扬<网络对抗>Exp8 Web基础 实践内容 1.简单的web前端页面(HTML.CSS等) 2.简单的web后台数据处理(PHP) 3.Mysql数据库 4.一个简单 ...
- 20135234mqy-——信息安全系统设计基础第十周学习总结
ls1:显示当前目录下的文件. ls2:查看文件的详细信息(用户名,群组名,大小,创建时间,读写权限等). who:读取需要的信息到存储器,并用标准输出函数打印到屏幕上 filesize:计算文件的字 ...
- android 实践项目 总结 （修改）
Android手机定位与地图实现 在一个不熟悉的环境中,获得自己的位置,选择合适的就餐地点,住宿和公交路线成为一项难题.本次的实践项目就是为了解决上述难题的,通过调用百度地图的接口实现定位.查询公交路 ...
- c/c++ 动态申请数组(转载)
转载:http://blog.csdn.net/hondely/article/details/6779887 转载:http://bbs.csdn.net/topics/390721031 转载:h ...
- 判断某个ImageView的背景图是否是已知的背景图相等
if (ibtn.getDrawable().getConstantState().equals(getResources().getDrawable(R.mipmap.image).getConst ...
- 误把Linux运行级别设置为6后的解决方法【转】
本文转载自:http://www.wuji8.com/meta/841011126.html 误把Linux运行级别设置为6后的解决方法 我们知道,Linux有7个运行级别,而运行级别设置为6 ...
- SpringBoot中的Quartz应用
Spring自带定时器任务: code: import org.springframework.beans.factory.annotation.Configurable; import org.sp ...
- 委托的begininvoke
http://blog.csdn.net/cml2030/article/details/2172854 http://blog.163.com/weizhiyong_111/blog/static/ ...
- java面试项目经验:框架及应用
Java项目经验 Java就是用来做项目的!Java的主要应用领域就是企业级的项目开发!要想从事企业级的项目开发,你必须掌握如下要点:1.掌握项目开发的基本步骤2.具备极强的面向对象的分析与设计技巧3 ...