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. 洛谷 P1433 吃奶酪【DFS】+剪枝

    题目链接:https://www.luogu.org/problemnew/show/P1433 题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处 ...

  2. hdu 1686 Oulipo 【KMP】(计算模式串匹配的次数——与已匹配的字串可以有交集)

    题目链接:https://vjudge.net/contest/220679#problem/B 题目大意: 输入一个T,表示有T组测试数据: 每组测试数据包括一个字符串W,T,T长度大于W小于100 ...

  3. 康托展开&&康托逆展开

    康托展开 简介:对于给定的一个排列,求它是第几个,比如54321是n=5时的第120个.(对于不是1~n的排列可以离散化理解) 做法: ans=a[n]*(n-1)!+a[n-1]*(n-2)!+~~ ...

  4. OutputStreramWriter和InputStreamReader类

    整个IO类中除了字节流和字符流还包括字节和字符转换流. OutputStreramWriter将输出的字符流转化为字节流 InputStreamReader将输入的字节流转换为字符流 但是不管如何操作 ...

  5. c#操作数据库的增删改查语句及DataGridView简单使用

    下面是要用户名和密码连接数据库的操作: 一.定义连接字符串,用来链接SQL Server string str_con = "server=.(服务器名称一般为 . );database=W ...

  6. 基于Grunt构建一个JavaScript库

    现在公认的JavaScript典型项目需要运行单元测试,合并压缩.有些还会使用代码生成器,代码样式检查或其他构建工具. Grunt.js是一个开源工具,可以帮助你完成上面的所有步骤.它非常容易扩展,并 ...

  7. ssm数据库中文乱码问题

    (1)详解Spring中的CharacterEncodingFilter--forceEncoding为true    <a href="http://www.cnblogs.com/ ...

  8. MYSQL时间类别总结: TIMESTAMP、DATETIME、DATE、TIME、YEAR

    总结背景: 对于MYSQL数据库日期类型或多有了解, 但并很清晰其中一些规则. 基本都是面向浏览器编码, 这实质上也是一种方式.  但期间遇到两个问题: 时常遇到建表中出现多个datetime或者ti ...

  9. vscode使用wsl调试代码

    第一步在WSL中配好环境 第二步安装CodeRunner即可,在用户配置中加入如下行: "terminal.integrated.shell.windows": "C:\ ...

  10. ext2文件系统学习（一）

    源码分析网上太多了,不写了,记录简单的实践步骤: 1. 创建ext2文件镜像并映射 cd /tmp count= mkfs.ext2 ext2-1M.img mkdir ext2 sudo mount ...