vue使用方法计算总金额
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使用方法计算总金额的更多相关文章
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
- vue.nextTick()方法的使用详解
什么是Vue.nextTick()?? 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 所以就衍生出了这个获取更新后的DOM的Vue方法 ...
- Vue的computed(计算属性)使用实例之TodoList
最近倒腾了一会vue,有点迷惑其中methods与computed这两个属性的区别,所以试着写了TodoList这个demo,(好土掩面逃~); 1. methods methods类似react中组 ...
- 使用并行的方法计算斐波那契数列 (Fibonacci)
更新:我的同事Terry告诉我有一种矩阵运算的方式计算斐波那契数列,更适于并行.他还提供了利用TBB的parallel_reduce模板计算斐波那契数列的代码(在TBB示例代码的基础上修改得来,比原始 ...
- vue调试方法
vue调试方法有如下三种 1.chrome谷歌插件vue-devtools 2.console.log().console.error().alert().debugger 3.设置全局变量,分为两种 ...
- 面试题：两种方法计算n！
直接上代码package com.face.test; public class Test { /** * 面试题:递归方法计算n! */ @org.junit.Test public void di ...
- 创建一个接口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类另 ...
- Spark Mllib里决策树回归分析使用.rootMeanSquaredError方法计算出以RMSE来评估模型的准确率（图文详解）
不多说,直接上干货! Spark Mllib里决策树二元分类使用.areaUnderROC方法计算出以AUC来评估模型的准确率和决策树多元分类使用.precision方法以precision来评估模型 ...
- Spark Mllib里决策树二元分类使用.areaUnderROC方法计算出以AUC来评估模型的准确率和决策树多元分类使用.precision方法以precision来评估模型的准确率（图文详解）
不多说,直接上干货! Spark Mllib里决策树二元分类使用.areaUnderROC方法计算出以AUC来评估模型的准确率 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的 ...
随机推荐
- 智能优化 之 下山单纯形法 C++
单纯形法简介在其他网站上都可以查到,我就不多说了 我们主要说方法 它主要解决的是局部最优解的问题 利用多边形进行求解的,若有n个变量,则利用n+1边形 我们这里以两个变量为例,求解第三维度的最优解 例 ...
- Bootstrsp 表单
摘要:bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.本文主要对这三种表单布局做一下基础的介绍,以及对表单控件做简要概括. 1.垂直表单 垂直表单也称基础表单.其基本结构如下: & ...
- 11.1 正睿停课训练 Day14
目录 2018.11.1 正睿停课训练 Day14 A 字符串 B 取数游戏(贪心) C 魔方(模拟) 考试代码 B C 2018.11.1 正睿停课训练 Day14 时间:3.5h 期望得分:100 ...
- BZOJ.4553.[HEOI2016&TJOI2016]序列(DP 树状数组套线段树/二维线段树(MLE) 动态开点)
题目链接:BZOJ 洛谷 \(O(n^2)\)DP很好写,对于当前的i从之前满足条件的j中选一个最大值,\(dp[i]=d[j]+1\) for(int j=1; j<i; ++j) if(a[ ...
- 潭州课堂25班：Ph201805201 并发（进程与线程池） 第十四课 (课堂笔记)
循环执行一个线程 # -*- coding: utf-8 -*- # 斌彬电脑 # @Time : 2018/7/20 0020 5:35 import threading import queue ...
- Struts2标签里面调用java方法
<s:if test="#session.user.hasPrivilegeByName(name)"> hasPrivilegeByName(name) 为User类 ...
- 部分手机（如三星）的Listview列表会自动加上黑线解决办法
部分手机(如三星)的Listview列表会自动加上黑线,这里将其去掉部分手机(如三星)的列表会自动加上黑线. 因为三星手机会自动加上分割线. // 部分手机(如三星C9 Pro)的设置项列表会自动加上 ...
- 设置Tab键缩进2字符
默认是1.74cm,是1.5字符. 论文是4个空格显示为4个点,或者全角下2个空格,显示为2个空格框.看上方的首航缩进标志是否在2. 看图 在段落 格式里面进行设置! 点上图的制表位 打开下图 选默认 ...
- Delphi 开发ActiveX控件(非ActiveForm)
Delphi 开发ActiveX控件(非ActiveForm) Q:为什么不采用ActiveForm工程?通过它可以快速开发带窗体控件,创建过程也非常简单(都不用考虑安全接口问题),很省事! A:如果 ...
- Oracle ERP Audit Funtion in R12.2.4
M1 JOB NAME: 164839 TABLE NAME: WIP_REQUIREMENT_OPERATIONS Request name: AuditTrail Update Tables O ...