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 ...
随机推荐
- 20145317彭垚_Web基础
20145317彭垚_Web基础 基础知识 Apache一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,由于其多平台和安全性被广泛使用,是最流行的Web服务器端软件之一.它快速.可靠并且可 ...
- linux内核分析 第7章读书笔记——《深入理解计算机系统》
第七章 链接 --<深入理解计算机系统> 链接是将各种代码和数据部分收集起来并组合成为一个单一文件的过程,这个文件可被加载(或拷贝)到存储器并执行. 一.编译器 大多数编译系统提供编译驱动 ...
- Zigbee学习
(一)Zigbee简介和开发环境快速建立(IAR) 1.我不是很清楚控制链条,对于Zigbee不是太清楚 答案:CC2530 芯片上集成了 8051 内核(增强型) 2.性能特点:低速率远距离,这造就 ...
- linux平台关闭某个进程的脚本
在开发LINUX平台下的程序时,经常需要为我们的开发的程序写启动程序和关闭程序的脚本. 启动脚本比较好做,关闭程序脚本如下: 具体思路是通过ps命令找到程序的进程ID号,然后通过Kill命令将程序Ki ...
- C++ Compress Floder
第三方函数.头文件.测试工程下载地址:http://download.csdn.net/detail/u012958937/8361733
- Delphi XE5 for Android （三）
在VCL下,常用的询问对话框包括 procedure TfrmMainVCL.btnAppMessageboxClick(Sender: TObject); begin if Applicatio ...
- Linux rhel7 下MySQL5.7.18详细安装文档
Linux rhel7 下MySQL5.7.18详细安装文档 本文安装MySQL5.7使用的是vm虚拟机rhel7操作系统 ,ftp文件传输是FileZilla3.27,远程连接xssh5.0 1 登 ...
- 解决 Ubuntu 14.04 图形界面无法正常显示 问题
参考: ubuntu清除系统缓存的方法 apt-get(四) 每天一个linux命令(33):df 命令 Ubuntu server 12.10 /dev/sda1 disk full 解决 Ubun ...
- UVa 10570 外星人聚会
https://vjudge.net/problem/UVA-10570 题意:输入1~n的排列,每次可以交换两个整数,求出最少交换次数使之变成有序的环状序列. 思路:主要的解题方法就是寻找置换环,举 ...
- hdu 5652 India and China Origins 并查集+二分
India and China Origins Time Limit: 2000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/ ...