博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
04、Vue.js---自定义过滤器
阅读量:5990 次
发布时间:2019-06-20

本文共 1468 字,大约阅读时间需要 4 分钟。

hot3.png

    自定义过滤器的关键字是 filter

    官网描述:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

{
{ message | capitalize }}

    官网中提到的 管道 的关键字是“|”,其格式是:{

{ data | fun }}。

    自定义过滤器的作用:在数据显示之前,对数据进行处理包装。过滤器也分为全局过滤器(filter)和局部过滤器(filters)。具体用法见代码及注释部分:

js代码部分:

window.onload = function (){  // 定义全局过滤器  Vue.filter("test",function(data){    // 形参data的实参是管道{
{ data | fun }}中 data return data >=10; }); new Vue({ el:"#app", data:{ num:0, today:new Date() }, // 定义局部过滤器 filters:{ // 定义局部过滤器,将以为数字前补0,其他的原样输出 addZero:function(data){ return data>=10 ? data : "0"+data; }, // 过滤器带多个参数 dateFormat:function(data,arg1,arg2){ // 可以打印 arg1/arg2 看看结果 // console.log(arg1); // console.log(arg2); let year = data.getFullYear(); let m = data.getMonth()+1; let day = data.getDate(); return year+arg1+m+arg1+day; } } });}

html代码部分:

  
{
{ num }}

通过全局过滤器 test 判断 num 是否 >=10

{
{ num | test }}

通过局部过滤器 addZero,将以为数字前补0,其他的原样输出

{
{ num | addZero }}

管道前的参数永远都是过滤器方法的第一个参数,

过滤器方法括号中所定义的参数,以第二位参数开始向后顺序排列

{
{ today | date-format("-","参数二") }}

 

至此,完毕。感谢您的阅读。

比你牛逼的人还在努力,我们有什么理由选择安逸。

转载于:https://my.oschina.net/u/3563169/blog/1577690

你可能感兴趣的文章
携程小程序初体验
查看>>
1.1 初步认识Apache Flink
查看>>
你所了解的RPA,可能都是错的!
查看>>
Vue用Canvas生成二维码合成海报并解决清晰度问题
查看>>
华为开源镜像站体验:美好终将不期而遇
查看>>
什么是Spring boot?Spring Boot快速入门以及Spring Boot实例教程
查看>>
Java SSM 商户 管理系统 客户管理 库存管理 销售报表 项目源码
查看>>
vue源码解析响应式的流程实现细节(干货)【三】
查看>>
人工智能等新技术将会给人们的生产、生活方式带来革命性的变化
查看>>
js中的数组遍历for forEach for of之间的区别
查看>>
HTTP缓存机制
查看>>
react-native第二弹来了!
查看>>
CentOS下安装mysql
查看>>
JAVA面试题:Redis的过期策略?手写一个LRU?
查看>>
iOS 11开发斯坦福(Stanford)第一课
查看>>
ES6 中的set,map
查看>>
从零搭建自己的Vue管理端框架(四)
查看>>
css居中方案汇总
查看>>
String,StringBuilder,StringBuffer的区别
查看>>
JVM上的响应式流 — Reactor简介
查看>>