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. Django 面向对象orm

    django支持三种风格的模型继承: 1. 抽象类继承: 父类继承自models.Model, 但不会在数据库中生成相应的数据表.父类的属性列存储在其子类的数据表中 2. 多表继承: 多表继承的每个类 ...

  2. Java并发程序设计（七）乐天派：无锁

    无锁 一.概述 无锁是处理并发的一种乐观策略,它会假设对资源的访问是没有冲突的.既然没有冲突自然不需要等待,所以所有的线程都可以在不停顿的状态下执行.那遇到冲突怎么办?接下来请看,无锁绝招“CAS”即 ...

  3. C++ 随机数rand()和srand()

    标准函数库中函数rand()可以生成0~RAND_MAX之间的一个随机数,其中RAND_MAX 是stdlib.h中定义的一个整数,它与系统有关. 例如在我的机器上,RAND_MAX=32767.可以 ...

  4. C/C++ 下的void main()

    很多人甚至市面上的一些书籍,都使用了void main( ),其实这是错误的.C/C++ 中从来没有定义过void main( ).C++之 父 Bjarne Stroustrup在他的主页上的 FA ...

  5. [模板][P3808]AC自动机(简单版)

    Description: 求n个模式串中有几个在文本串中出现 Solution: 模板,详见代码: #include<bits/stdc++.h> using namespace std; ...

  6. Cocos Creator 的实现拖尾效果

    在游戏中,有时会需要在某个游戏对象上加上移动后的轨迹若隐若现的效果.使得游戏的效果较好,比如游戏大招,刀光,法术,流星划痕之类. Cocos Creator提供了一种内置的拖尾渐隐效果的实现方法:组件 ...

  7. Oracle中使用透明网关链接到Sqlserver(转)

    测试环境介绍 1.ORACLEServer   Database version:10.2.0 IP:192.168.1.5 ORACLE_HOME:D:\oracle\product\10.2.0\ ...

  8. Java容器：HashTable, synchronizedMap与ConcurrentHashMap

    首先需要明确的是,不管使用那种Map,都不能保证公共混合调用的线程安全,只能保证单条操作的线程安全,在这一点上各Map不存在优劣. 前文中简单说过HashTable和synchronizedMap,其 ...

  9. JavaScript(ES5)使用保留字作函数名

    ES5同意直接使用保留字作为属性名.但却不同意直接使用保留字作为函数名 设现有类NSMap,若要给NSMap的原型加delete方法,如 function NSMap(){ } NSMap.proto ...

  10. 模拟一个带背景的 TPanel

    https://www.cnblogs.com/del/archive/2008/09/01/1281345.html