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. 洛谷 P1359 租用游艇【dp】(经典)

    题目链接:https://www.luogu.org/problemnew/show/P1359 题目描述 长江游艇俱乐部在长江上设置了n 个游艇出租站1,2,…,n.游客可在这些游艇出租站租用游艇, ...

  2. Linux学习之分区自动挂载与fstab文件修复(九)

    linux分区自动挂载与fstab文件修复 在前面我们实现新添加硬盘,进行分区与格式化,然后手动挂载,这样做,在重启后,需要重新挂载才能使用. https://www.cnblogs.com/-wen ...

  3. 仿win10环境变量助手

    相信很多人用过win10后再换回win7或者xp等系统都会有些不习惯,所以在这里安利一款博主自己开发的小软件:环境变量助手. 继承于Win10风格的环境变量,操作简单方便,使用时需要账户权限. 注意: ...

  4. muduo网络库架构总结

    目录 muduo网络库简介 muduo网络库模块组成 Recator反应器 EventLoop的两个组件 TimerQueue定时器 Eventfd Connector和Acceptor连接器和监听器 ...

  5. L1 与 L2 正则化

    参考这篇文章: https://baijiahao.baidu.com/s?id=1621054167310242353&wfr=spider&for=pc https://blog. ...

  6. [BZOJ3451][Tyvj1953]Normal(点分治+FFT)

    https://www.cnblogs.com/GXZlegend/p/8611948.html #include<cmath> #include<cstdio> #inclu ...

  7. BZOJ.2229.[ZJOI2011]最小割(最小割树)

    题目链接 题意:给定一张无向图,求任意两点之间的最小割. 在所有点中任选两个点作为源点\(S\).汇点\(T\),求它们之间的最小割\(ans\),并把原图分成两个点集\(S',T'\),用\(ans ...

  8. Python:安装MYSQL Connector

    在Python中安装MySQL Connector有如下三种方法: 1.直接安装客户端[建议使用] pip install mysqlclient 2.安装mysql连接器 pip install - ...

  9. [BZOJ3080]Minimum Variance Spanning Tree/[BZOJ3754]Tree之最小方差树

    [BZOJ3080]Minimum Variance Spanning Tree/[BZOJ3754]Tree之最小方差树 题目大意: 给定一个\(n(n\le50)\)个点,\(m(m\le1000 ...

  10. 深入学习 FutureTask

    原文出处: 天凉好个秋 第一部分:What 在Java中一般通过继承Thread类或者实现Runnable接口这两种方式来创建多线程,但是这两种方式都有个缺陷,就是不能在执行完成后获取执行的结果,因此 ...