辉太郎看前端(vue中的过滤器filter)

最新推荐文章于 2022-06-28 17:27:30 发布

辉Gg呀！

最新推荐文章于 2022-06-28 17:27:30 发布

阅读量142

点赞数 1

分类专栏：笔记文章标签：过滤器 vue

本文链接：https://blog.csdn.net/m0_50512274/article/details/112472109

版权

笔记专栏收录该内容

57 篇文章 0 订阅

订阅专栏

前言

在说过滤器时，我们要从概念，使用，方式等几个方面入手去说

首先过滤器是格式化文本输出。
过滤器分为：全局过滤器和局部过滤器。
优先级：全局过滤器和局部过滤器重名时，会采用局部过滤器。

全局过滤器

全局过滤器在多个实例以及组件中使用
语法：Vue.filter("名"，function(形参){默认的第一形参就是调用过滤器的变量})
定义位置：一定要在vue实例化之前定义或在main.js中定义。

代码展示

//字符串首字母大写
Vue.filter("big",function(str){
        
        var first=str.charAt().toUpperCase()
        var end=str.substring(1,str.length);
        console.log(end)
        return first+end;
    })

局部过滤器

局部过滤器只能在当前的实例或者组件中使用

语法： filters:{名（形参）{默认的第一形参就是调用过滤器的变量}}
定义位置：单个组件中的export default {}

代码展示

//时间过滤器
var vm=new Vue({
        el:"#app",
        data:{
            title:"hello",
            timer:new Date()
        },
filters:{
            format(val){
                var year=val.getFullYear();
                var month=val.getMonth()+1;
                var day=val.getDate();
                var H=val.getHours();
                var mi=val.getMinutes();
                var ss=val.getSeconds()+"";
                    ss=ss.padStart(2,"0")
               return `${year}/${month}/${day} ${H}:${mi}:${ss}`
            }
        }
 })

调用

双花括号插值和 v-bind 表达式，通过管道符 ( | )来连接。
过滤器可以串联 {{变量|过滤器名|过滤器名2}}。
过滤器有参数时 {{变量 | 过滤器(参数)}}。

代码展示

<body>
    <div id="app">
       {{ title | big }}
       {{ timer | format}}
    </div>
</body>

总结

初出茅庐，请各位大佬多多关照🙂。

辉Gg呀！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
辉太郎看前端(vue中的过滤器filter)

前言在说过滤器时，我们要从概念，使用，方式等几个方面入手去说首先过滤器是格式化文本输出。过滤器分为：全局过滤器和局部过滤器。优先级：全局过滤器和局部过滤器重名时，会采用局部过滤器。全局过滤器全局过滤器在多个实例以及组件中使用语法：Vue.filter("名"，function(形参){默认的第一形参就是调用过滤器的变量})定义位置：一定要在vue实例化之前定义或在main.js中定义。代码展示//字符串首字母大写Vue.filter("big",function(
复制链接

扫一扫