1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vuex之使用getters计算每一件购物车中商品的总价</title>
  6.     <script src="vue.js"></script>
  7.     <script src="vuex.js"></script>
  8. </head>
  9. <body>
  10. <div id="demo">
  11.     <Lists></Lists>
  12. </div>
  13. <script type="text/x-template" id="Lists">
  14.     <div>
  15.         <h1>购物车</h1>
  16.         <table border="1">
  17.             <tr>
  18.                 <th>编号</th>
  19.                 <th>名称</th>
  20.                 <th>价格</th>
  21.                 <th>数量</th>
  22.                 <th>总计</th>
  23.             </tr>
  24.             <tr v-for="v in goods">
  25.                 <td>{{v.id}}</td>
  26.                 <td>{{v.title}}</td>
  27.                 <td>{{v.price}}</td>
  28.                 <td>{{v.num}}</td>
  29.                 <td>{{v.totalPrice}}</td>
  30.             </tr>
  31.         </table>
  32.         <h1>总价：{{totalPrice}}</h1>
  33.     </div>
  34. </script>
  35. <script>
  36.     let Lists = {
  37.         template: "#Lists",
  38.         computed: {
  39.             totalPrice() {
  40.                 return this.$store.getters.totalPrice;
  41.             },
  42.             goods() {
  43.                 return this.$store.getters.goods;
  44.             }
  45.         }
  46.     }
  47.     let store = new Vuex.Store({
  48.         state: {
  49.             goods: [
  50.                 {id: 1, title: 'ihpone7', price: 100, num: 3},
  51.                 {id: 2, title: 'vivo20', price: 100, num: 2}
  52.             ]
  53.         },
  54.         getters: {
  55.             //获取商品总价：
  56.             totalPrice: state => {
  57.                 let totalPrice = 0;
  58.                 state.goods.forEach((v) => {
  59.                     totalPrice += v.num * v.price;
  60.                 });
  61.                 return totalPrice;
  62.             },
  63.             goods(state) {
  64.                 let goods = state.goods;
  65.                 goods.forEach((v) => {
  66.                     v.totalPrice = v.num * v.price;
  67.                 })
  68.                 return goods;
  69.             }
  70.         }
  71.     });
  72.     var app = new Vue({
  73.         el: "#demo",
  74.         store,
  75.         components: {
  76.             Lists
  77.         }
  78.     });
  79. </script>
  80. </body>
  81. </html>

　　

070——VUE中vuex之使用getters计算每一件购物车中商品的总价的更多相关文章

  1. 071——VUE中vuex之使用getters计算每一件购物车中商品的总价

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 文件夹中含有子文件夹，修改子文件夹中的图像存储格式（python实现）

    文件夹中含有子文件夹,修改子文件夹中的图像存储格式,把png图像改为jpg图像,python代码如下: import os import cv2 filePath = 'C:\\Users\\admi ...

  3. 069——VUE中vuex之使用getters高效获取购物车商品总价

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 073——VUE中vuex之使用actions和axios异步初始购物车数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue实现简单的列表金额计算效果（简易购物车）

    效果图: 使用技术:v-for v-bind v-on实现简单的列表选中绑定操作 代码: <!DOCTYPE html> <html> <head> <met ...

  6. Vue中Vuex的详解与使用(简洁易懂的入门小实例)

    怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...

  7. vue：vuex中mapState、mapGetters、mapActions辅助函数及Module的使用

    一.普通store中使用mapState.mapGetters辅助函数: 在src目录下建立store文件夹: ​ index.js如下: import Vue from 'vue'; import ...

  8. vue中vuex的五个属性和基本用法

    VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...

  9. 074——VUE中vuex之模块化modules开发实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. bootstrap3

    bs是基于html5和css3的, h5和css3是今后的趋势. html5只是说文档的 "标准"是h5, 但是文档的类型仍然是 html. 所以在写文档类型的时候, 就不能要那个 ...

  2. POJ 2975 Nim（博弈）题解

    题意:已知异或和为0为必败态,异或和不为0为必胜态,问你有几种方法把开局从当前状态转为必败态. 思路:也就是说,我们要选一堆石头,然后从这堆石头拿走一些使剩下的石碓异或和为0.那么只要剩下石堆的异或和 ...

  3. java 关于wait，notify和notifyAll

    public synchronized void hurt() { //... this.wait(); //... } public synchronized void recover() { // ...

  4. 【TCP/IP详解 卷一：协议】第四章 ARP：地址解析协议 以及其他部分的一些知识

    4.1 引言 数据链路 如以太网(Ethernet) 或者 令牌环网 都有自己的寻址机制(一般为 48 bit 的地址). 一个网络(数据链路层) 可以同时被多个不同的网络使用.比如,一组使用TCP/ ...

  5. PTA第三次上机

    5-1 #include <iostream> #include <cstdlib> #include <string.h> using namespace std ...

  6. 详解一下 javascript 中的比较

    翻译自:http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3 在JS中的关系比较(Relational Comparison)运算,指的 ...

  7. LA 3266 田忌赛马

    https://vjudge.net/problem/UVALive-3266 题意: 田忌赛马,赢一局得200两银子,输一局赔200两银子,平局不赔不赚,问最多能赚多少银子. 思路: 先排序,然后比 ...

  8. python 处理命令行参数--转载

    标题写了那么久,现在现在才有时间,整理下自己的思路.首先先总结下自己对sys模块的理解.手册上对sys的描述是系统参数和系统函数,这里的系统实际上是python解释器.这个模块提供了用户可以访问的解释 ...

  9. json.dump()和json.dmups()的区别

    在python中支持json合适的数据是通过json模块实现的. 在序列化json数据的时候遇到两个形状很像的函数,dump()和dumps().主要说说他们的区别 先看看官方文档的说明:https: ...

  10. WPF基础学习笔记整理 （三） x命名空间

    “x命名空间”中x是XAML的首字母,用来引导XAML编译器把XAML代码编译成CLR代码.下边的图片表格列举了该命名空间部分成员及其作用,更多请见URL:https://msdn.microsoft ...