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 ...
随机推荐
- Win10 Edge浏览器怎么重装 Win10重装Edge浏览器
具体如下: 重新安装Microsoft Edge 1.按Windows键+ R,打开 输入以下代码,可以直接复制黏贴. %LocalAppData%\Packages\Microsoft.Micros ...
- C# 获取当前IIS请求地址
using System;using System.Collections.Generic;using System.Linq;using System.Web; /// <summary> ...
- Git 基础 —— 常用命令
Git 基础学习系列 Git 基础 -- 安装 配置 别名 对象 Git 基础 -- 常用命令 Git 基础 -- 常见使用场景 Git基础 -- Github 的使用 git init 创建 Git ...
- arm linux下编译库System.Net.Primitives.dll和System.Xml.XmlSerializer.dll
1.环境: /home/jello # uname -aLinux 3.10.0 #2 SMP Mon Mar 6 17:52:09 CST 2017 armv7l GNU/Linux 2.获取mo ...
- P1600 天天爱跑步
lca真心不太会,这里只介绍60分做法,100的太难辣简单了就不介绍了 n<=1000 zz回溯爆搜 S[i]全部相等 这dfs序都不用lca的,2333,差分,然后输出判断一下是否是0(1到i ...
- C#学习笔记（五）：while循环和for循环
while循环 while循环和for循环,可以相互替换,范围和效能一样,理解事物的逻辑不一样 while循环用于条件不确定的逻辑 for循环用于计算次数的逻辑 for循环 快捷写法,按两下TAB i ...
- Android程序示例
目录 Android代码示例 OptionsMenu ImageButton CheckBox & RadioButton Context Menu快捷菜单 Key Event ListVie ...
- Python的替换函数——replace()，strip(),和re.sub()
在Python中常用的三个"替换"函数是strip(),replace()和re.sub(),下面来讲讲这三个函数的用法. 一.replace() 基本用法:对象.replace( ...
- Mysql-SqlServer区别
/* sql规范 所有关键字大写 表面跟字段跟数据库对应 一条sql语句结束必须跟;号 */ /*关键字处理*/ --sqlserver SELECT * FROM [Date]; --mysql S ...
- Kali Linux下常用软件安装及配置
0x00 Synaptic Synaptic(新立得)是一个高级软件包管理器,它可以管理系统内安装的每个软件及包组件,在图形界面内完成LINUX系统软件的搜寻.安装和删除. Synaptic安装简单, ...