vue中的filters的用法
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.productPrice*item.productQuentity | formatMoney}}</div> <!--注意元需要用双引号，不能用单引号，会出错-->
<div>金额：{{item.productPrice*item.productQuentity | money("元")}}</div> </li> </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:[]
},
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语法=>将this指向外部，不用再使用_this
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;
});
}
} });
<!--注意Vue要大写v，不然会报错-->
Vue.filter("money",function (value,type) {
return "￥"+value.toFixed(2)+type;
});
vue中的filters的用法的更多相关文章
- 详解Vue中watch的高级用法
我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...
- vue 中 命名视图的用法
今天主要记录 vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...
- vue中watch的详细用法
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
- vue中watch的详细用法（转载）
在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...
- vue中this.$set的用法
之前了解这个方法的时候,感觉这一辈子也用不到这个方法,因为当时没有应用场景,但是还真有用的时候,我相信你们也有用到时候. 从三个方面给大家说一下这个this.$set: 1.this.$set实现什么 ...
- vue中过滤器filters的使用
组件内写法 filters:{ filter:function(data,arg1,arg2){ return .... } } 全局写法 filters('filter',function(data ...
- vue中$ref的基本用法
1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...
- vue中watch函数的用法
vue中watch函数: 不仅可以判断路由变化(上篇博客有介绍),还可以判断数据的变化 (1):首先写watch函数 (2):在data里定义值 (3):在methods里写方法 (4):使用值
- vue中router-link的详细用法
官网文档地址:https://router.vuejs.org/zh/api/#to 今天项目突然有需求,让vue中的一个页面跳转到另一个页面 // 字符串 <router-link to=&q ...
随机推荐
- public static List SmaDataManager.getThreads(Context context)
public static List<TxrjThreads> getThreads(Context context) 解析获取Threads列表之要点: 1. 得到带有fail信息的th ...
- eclipse的jdk版本和spring冲突问题WARN XmlWebApplicationContext:1060 - Exception thrown from LifecycleProcessor on context close
项目环境: jdk1.8 tomcat7 问题:eclipse启动tomcat后控制台报如下错误: WARN XmlWebApplicationContext:1060 - Exception thr ...
- HDU 4301 Divide Chocolate （DP + 递推）
Divide Chocolate Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- SpringBoot配置属性转载地址
SpringBoot配置属性系列 SpringBoot配置属性之MVC SpringBoot配置属性之Server SpringBoot配置属性之DataSource SpringBoot配置属性之N ...
- k8s实战之Service
一.概述 为了适应快速的业务需求,微服务架构已经逐渐成为主流,微服务架构的应用需要有非常好的服务编排支持,k8s中的核心要素Service便提供了一套简化的服务代理和发现机制,天然适应微服务架构,任何 ...
- 【MySQL】乐观锁和悲观锁
最近学习了一下数据库的悲观锁和乐观锁,根据自己的理解和网上参考资料总结如下: 悲观锁介绍(百科): 悲观锁,正如其名,它指的是对数据被外界(包括本系统当前的其他事务,以及来自外部系统的事务处理)修改持 ...
- Kubernetes(k8s) docker集群搭建
原文地址:https://blog.csdn.net/real_myth/article/details/78719244 一.Kubernetes系列之介绍篇 •Kubernetes介绍 1.背 ...
- macOS SIP 权限设置
1.macOS SIP 权限设置 对于 macOS 10.11+ 用户,由于系统启用了 SIP(System Integrity Protection), 导致 root 用户也没有权限修改 /usr ...
- win7下 go语言开发环境搭建（64bit）
Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进程 ...
- CListCtrl的LVN_KEYDOWN事件中怎么捕捉不到回车键?
原文链接: http://computer-programming-forum.com/81-vc/c92ab6e6d6ac92bc.htm 楼主 How to handle the return k ...