Vue（六）过滤器
- 用来过滤模型数据，在显示之前进行数据处理和筛选
- 语法：{{ data | filter1(参数) | filter2(参数)}}
- vue1.0中内置许多过滤器，如：currency、uppercase、lowercase、limitBy、orderBy、filterBy
- vue2.0中已经删除了所有内置过滤器，全部被废除
- a.使用第三方工具库，如lodash、date-fns日期格式化、accounting.js货币格式化等
- b.使用自定义过滤器
- 3.l 自定义全局过滤器
使用全局方法Vue.filter(过滤器ID,过滤器函数)
- 3.2 自定义局部过滤器
<script>
/* 自定义全局过滤器 */ /* 个位数补0 */
Vue.filter('addZero',function(data){
return data<10?'0'+data:data;
}); /* 保留几小数 四舍五入 toFixed方法不稳定*/
Vue.filter('number',(data,n) => {
return data.toFixed(n);
}) /* 日期的格式化处理 */
Vue.filter('date',data =>{
let d = new Date(data);
return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
}) window.onload=function(){
let app = new Vue({
el:'.container',
data:{
currentTume:Date.now()
},
filters:{ //局部过滤器
number:(data,n) => {
return data.toFixed(n);
}
}
})
} </script> <body> <div class="container">
<h3>{{ 8 | addZero }}</h3>
<h3>{{ 12.345678 | number(3) }}</h3> <!-- 当前时间的毫秒值 -->
<h3>{{currentTume | date}}</h3>
</div> </body>
Vue（六）过滤器的更多相关文章
- 六、vue基础--过滤器定义
七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue filter过滤器简单应用
vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...
- vue filters过滤器
vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...
- vue的过滤器
Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...
- vue自定义过滤器的创建和使用
1.简单介绍 过滤器的作用:实现数据的筛选.过滤.格式化. 过滤器的本质是一个有参数,有返回值的方法. 过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...
- VUE：过滤器及日期格式化moment库
VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符
过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...
- vue 时间过滤器
过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...
- 第六十五篇：Vue的过滤器
好家伙, 过滤器,vue3取消了,只有vue2能用 1.过滤器 过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化. 过滤器可以用在两个地方:插值表达式和v-bind属性绑定. 过 ...
随机推荐
- 部署Asp.net core & Nginx，通过nginx转发
部署Asp.net core & Nginx,通过nginx转发 CentOS 7 x64 1.vs2017 建立Asp.net core项目,并发布到目录 2.通过FTP工具,将程序copy ...
- 【BZOJ3379】[Usaco2004 Open]Turning in Homework 交作业
题解: 比较容易想到二分答案+时间逆流 这样就变成了经典的路灯问题 f[a][b][0/1] 其实可以不用二分答案 根据倒着考虑我们会发现一定是先走旁边的再走中间的 计算到当前点+下课时间所需的最小时 ...
- 【BZOJ1417】Pku3156 Interconnect
题解: 比较简单的一道题 显然我们只需要知道每个联通块的大小就可以了 然后发现x1+xn=30 其中xi<=xi+1的状态只有5000 所以直接记忆化搜索就可以了 emm原来map还可以映射ve ...
- bzoj2961 共点圆 bzoj 4140
题解: 比较水的一道题 首先我们化简一下式子发现是维护xxo+yyo的最值 显然是用凸包来做 我们可以直接用支持插入删除的凸包 也是nlogn的 因为没有强制在线,我们也可以cdq,考虑前面一半对答案 ...
- 【Codeforces】Gym100633 D. LWDB
题解 点分治,然后每个点上挂着一个距离不超过\(a_{i}\)的颜色改成\(c\) 用一个单调栈维护距离单调递减,每次查询在每个包括这个点的分治中心的单调栈上二分,找到修改最靠前的颜色作为这个点的颜色 ...
- 卸载impala
1):删除impala rm -rf $(find / -name "*impala*") 2):卸载impala相关依赖 rm -rf $(find / -name " ...
- Java程序编译和运行过程之 一个对象的生命之旅（类加载和类加载器）
Java程序从创建到运行要经过两个大步骤 1:源文件(.java)由编译器编译成字节码ByteCode(.class) 2:字节码由Java虚拟机解释并运行 源文件编译成字节码,主要分成两个部分: 1 ...
- NOIP2017提高组Day2T2 宝藏 洛谷P3959 状压dp
原文链接https://www.cnblogs.com/zhouzhendong/p/9261079.html 题目传送门 - 洛谷P3959 题目传送门 - Vijos P2032 题意 给定一个 ...
- Python 2.7 cython cythonize py 编译成 pyd 谈谈那些坑
Python 2.7 cython cythonize py 编译成 pyd 谈谈那些坑 前言 基于 python27 的 pyc 很容易被反编译,于是想到了pyd,加速运行,安全保护 必要准备 安装 ...
- react-antd 按需加载报错
基于create-react-app 搭建的 react 项目 引入 antd UI 配置按需加载 但是报一下错误 .翻译过了一下 是内嵌JavaScript选项没有开启什么的 大白话就是 les ...