首页 > 其他分享> 文章详细

vue的过滤器

2022-09-11 04:00:22 阅读：260 来源： 互联网

标签：vue return 私有 arg1 调用过滤器格式化

过滤器（Filters）是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定。

过滤器应该被添加在JavaScript表达式的尾部，由“管道符”进行调用，示例代码如下：

过滤器的注意点：

　　1.要定义到filters节点下，本质上是一个函数

　　2.在过滤器函数中，一定要有return值

　　3.在过滤器的形参中，就可以获取到管道符前面带出来的值

　　4.如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”调用的是“私有过滤器”

私有过滤器和全局过滤器

在filters节点下定义的过滤器，称为’私有过滤器‘，因为它只能在当前vm实例所控制的el区域使用。

如果希望在多个vue实例之间共享过滤器，则可以安装如下的格式定义全局过滤器：

    <script>
        //声明格式化时间的全局过滤器
        Vue.filter('dateFormat',function(time){
            //1对time进行格式化处理,得到YYYY-MM-DD HH:mm:ss格式的时间
            const dtStr = dayjs(time).format("YYYY-MM-DD HH:mm:ss")
            //2.把格式化后的时间return出去
            return dtStr
        })
        
    </script>

2.3连续调用多个过滤器

过滤器可以串联地进行调用，例如：

2.4过滤器传参

过滤器的本质是JavaScript函数，因此可以接收参数，格式如下：

<p>{{message | filter(arg1,arg2)}}</p>

//过滤器处理函数的形参列表中
// 第一个参数，永远都是"管道符“前面待处理的值
//第二个参数开始，才是调用过滤器时传递过来的arg1和arg2参数
Vue.filter('filterA',(msg,arg1,arg2) =>{
    //过滤器的代码逻辑
}）

标签：vue,return,私有,arg1,调用,过滤器,格式化
来源： https://www.cnblogs.com/funkyd/p/16672403.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue的过滤器