1、预览

2、index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0">

    <title>Title</title>

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

<div id="app">

<!--<h2>{{title}}</h2>-->

    <li v-for="(item,index) in productList">

        <div >产品名称：{{item.productName}}</div>

        <dd v-for="part in item.parts" v-text="part.partsName"></dd>

        <div>价格：{{item.productPrice+"--------------------"+index}}</div>

        <div>数量：{{item.productQuentity}}</div>

        <div>金额：{{item.productPrice*item.productQuentity  | formatMoney}}</div>

        <div>金额：{{item.productPrice*item.productQuentity  | money("元")}}</div>

        <!--<img src="item.productImage" alt="">-->

        <!--<img src="{{item.productImage}}" alt="">-->

        <img v-bind:src="item.productImage" alt="">

        <a href="javascript:;" v-on:click="changeMoney(item,-1)">-</a>

        <a href="javascript:;" @click="changeMoney(item,1)">+</a>

        <input type="text" value="0" disabled   v-model="item.productQuentity">

        <!-- v-bind:class="{'check':item.checked}"这里的check用的是单引号-->

        <a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selectedProduct(item);">

        </a>

    </li>

    <div>

        <!--<span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAllFlag=true"></span>-->

        <!--注意不要将true写成ture，还要将div写到vue的作用范围内的div中，即#app这个div中-->

        <span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAll(true);"></span>

        <a href="" class="item-del-btn" @click="checkAll(false);">取消全选</a>

        <div class="item-total">

            总金额 <span class="total-price">{{totalCheckMoney| money("元")}}</span>

        </div>

    </div>

</div>

<script src="js/lib/vue.min.js"></script>

<script src="js/lib/vue-resource.min.js"></script>

<script src="js/cart.js"></script>

</body>

</html>

3、cart.js

/**

 * Created by kk on 2017/4/16.

 */

new Vue({

    el:"#app",

    data:{

        // title:"hello vue"

        totalMoney:0,

        productList:[],

        checkAllFlag:false,

        totalCheckMoney:0

    },

    filters:{

formatMoney:function (value) {

    return "￥"+value.toFixed(2)

}

    },

    mounted:function () {

        //类似于jquery中的ready方法

        this.$nextTick(function () {

            this.cartView();

        })

    },

    methods:{

        cartView:function () {

    // this.title="Vue hello"

            //var _this=this;

            // this.$http.get("data/cart.json",{"id":123}).then(function (res) {

            //     _this.productList=res.body.result. productList;

            //     _this.totalMoney=res.body.result.totalMoney;

            // });

//            ES6语法

            let _this=this;

            this.$http.get("data/cart.json",{"id":123}).then(res=> {

                this.productList=res.body.result. productList;

            this.totalMoney=res.body.result.totalMoney;

            });

},

        changeMoney:function (product,way) {

            if(way>0)

            {

                product.productQuentity++;

            }

            else{

                product.productQuentity--;

                if(product.productQuentity<1){

                    product.productQuentity=1;

                }

            }

            this.calcTotalPrice();

        },

        selectedProduct:function (item) {

            //alert("1");

            if(typeof item.checked=="undefined"){

                //Vue.set(item,"checked",true);//全局注册checked

                this.$set(item,"checked",true);//局部注册checked

            }

            else {

                item.checked=!item.checked;

            }

            this.calcTotalPrice();

        },

        checkAll:function (flag) {

            this.checkAllFlag=flag;

            var _this=this;

            this.productList.forEach(function (item,index) {

                if(typeof item.checked=="undefined"){

                    _this.$set(item,"checked",_this.checkAllFlag);

                }else {

                    item.checked=_this.checkAllFlag;

                }

            });

            this.calcTotalPrice();

        },

        calcTotalPrice:function () {

            var _this=this;

            this.totalCheckMoney=0;

            this.productList.forEach(function (item, index) {

                if(item.checked){

                    _this.totalCheckMoney+=item.productPrice*item.productQuentity;

                }

            })

        }

    }

});

Vue.filter("money",function (value,type) {

    return "￥"+value.toFixed(2)+type;

});

vue使用方法计算总金额的更多相关文章

  1. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

  2. vue.nextTick()方法的使用详解

    什么是Vue.nextTick()??   定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 所以就衍生出了这个获取更新后的DOM的Vue方法 ...

  3. Vue的computed(计算属性)使用实例之TodoList

    最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...

  4. 使用并行的方法计算斐波那契数列 (Fibonacci)

    更新:我的同事Terry告诉我有一种矩阵运算的方式计算斐波那契数列,更适于并行.他还提供了利用TBB的parallel_reduce模板计算斐波那契数列的代码(在TBB示例代码的基础上修改得来,比原始 ...

  5. vue调试方法

    vue调试方法有如下三种 1.chrome谷歌插件vue-devtools 2.console.log().console.error().alert().debugger 3.设置全局变量,分为两种 ...

  6. 面试题：两种方法计算n！

    直接上代码package com.face.test; public class Test { /** * 面试题:递归方法计算n! */ @org.junit.Test public void di ...

  7. 创建一个接口Shape，其中有抽象方法area，类Circle 、Rectangle实现area方法计算其面积并返回。又有Star实现Shape的area方法，其返回值是0，Star类另有一返回值boolean型方法isStar；在main方法里创建一个Vector，根据随机数的不同向其中加入Shape的不同子类对象（如是1，生成Circle对象；如是2，生成Rectangle对象；如是3，生成S

    题目补充: 创建一个接口Shape,其中有抽象方法area,类Circle .Rectangle实现area方法计算其面积并返回. 又有Star实现Shape的area方法,其返回值是0,Star类另 ...

  8. Spark Mllib里决策树回归分析使用.rootMeanSquaredError方法计算出以RMSE来评估模型的准确率（图文详解）

    不多说,直接上干货! Spark Mllib里决策树二元分类使用.areaUnderROC方法计算出以AUC来评估模型的准确率和决策树多元分类使用.precision方法以precision来评估模型 ...

  9. Spark Mllib里决策树二元分类使用.areaUnderROC方法计算出以AUC来评估模型的准确率和决策树多元分类使用.precision方法以precision来评估模型的准确率（图文详解）

    不多说,直接上干货! Spark Mllib里决策树二元分类使用.areaUnderROC方法计算出以AUC来评估模型的准确率 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的 ...

随机推荐

  1. 微信小程序倒计时组件开发

    今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...

  2. 《Gradle权威指南》--Android Gradle插件

    No1: Android Gradle插件分类 App插件id:com.android.application Library插件id:com.android.library Test插件id:com ...

  3. hdu 1576 A/B 【扩展欧几里得】【逆元】

    <题目链接> <转载于 >>> > A/B Problem Description 要求(A/B)%9973,但由于A很大,我们只给出n(n=A%9973)( ...

  4. P3420 [POI2005]SKA-Piggy Banks

    P3420 [POI2005]SKA-Piggy Banks套路题,a通过某种关系和其他的点建立关系.这种题不是环(dfs就可以了),就是并查集找连通块.这种题要建图,画图,就很清楚了. #inclu ...

  5. Netty handler处理类无法使用@Autowired注入bean的解决方法

    问题由来: 公司有个项目用到netty作为websocket的实现,最近打算部署双机,这使得原来在内存中的保存Channel信息的方案不再可行,需要转移到redis中,改造过程中发现通过@Autowi ...

  6. 【值得收藏】一份非常完整的Mysql规范

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 本文从芋道源码转载,在原有内容基础上结合阿里巴巴Java开发手册中Mysql数据库章节的介绍,加上自己的理解和说明,整理而 ...

  7. SQLite中的WHERE子句

    SQLite中的WHERE子句 WHERE子句用于从FROM子句生成的工作表中过滤行.它提供了对每一行进行判断的表达式.当表达式返回的值为false或NULL时,此行就会被丢弃.这种丢弃只是删除记录, ...

  8. loj#2129. 「NOI2015」程序自动分析

    题目链接 loj#2129. 「NOI2015」程序自动分析 题解 额... 考你会不会离散化优化常数 代码 #include<queue> #include<cstdio> ...

  9. bzoj 4737: 组合数问题

    Description 组合数C(n,m)表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3)三个物品中选择两个物品可以有( 1,2),(1,3),(2,3)这三种选择方法.根据组合数 ...

  10. 2041 ACM 超级楼梯

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2041 数学问题,找规律,可以先假设全一步,然后一个两步的,两个两步的~~.很容易发现规律:F[N]=F[N ...