Vue——day09之过滤器

目录

Vue 过滤器介绍

示例代码

效果展示

总结

Vue 过滤器介绍

        Vue 过滤器是一种用于对数据进行特定格式化的工具，可以在模板中使用管道符（|）来应用过滤器。过滤器在显示数据之前，可以对数据进行一些简单的逻辑处理，从而使数据更易读或更符合特定的需求。

在 Vue 中，有两种方式来定义和使用过滤器：

1. 全局过滤器：

   • 定义全局过滤器：可以使用 Vue.filter(name, callback) 来注册全局过滤器。name 是过滤器的名称，callback 是过滤器的回调函数。通过全局注册，可以在应用的任何地方使用该过滤器。
   • 使用全局过滤器：在模板中使用过滤器时，需要在要显示的数据后面使用管道符（|）跟上过滤器的名称。例如：{{data | filterName}}。可以在一行中使用多个过滤器，过滤器会按照从左到右的顺序依次应用。

2. 局部过滤器：

   • 定义局部过滤器：在 Vue 实例的 filters 选项中，可以定义局部过滤器。局部过滤器只在当前 Vue 实例中可用。
   • 使用局部过滤器：在模板中使用局部过滤器时，需要在要显示的数据后面使用管道符（|）跟上过滤器的名称。例如：{{data | filterName}}。可以在一行中使用多个过滤器，过滤器会按照从左到右的顺序依次应用。

        过滤器的回调函数接收要过滤的数据作为第一个参数，并可以接收额外的参数。可以在过滤器的定义时指定参数，也可以在使用过滤器时传递参数。

        需要注意的是，过滤器并不会改变原本的数据，而是产生一个新的对应的数据。过滤器仅在模板中起作用，不会对原始数据进行修改。因此，在 Vue 中，过滤器主要用于在模板中对数据进行格式化和展示。如果需要对数据进行修改，应该使用计算属性或方法来实现。

示例代码

    
    
    

    
    




    

        
 显示格式化后的时间 
        
 计算属性实现 ==》现在是:{{fmtTime}}
        
methods 实现 ==》现在是:{{getFmtTime()}}
        

        

        

        
 过滤器实现 ==》现在是:{{time | timeFormater}}

        
 过滤器实现 ==》现在是:{{time | timeFormater('YYYY 年 MM 月 DD 日') | mySlice}}


        

        

        

        
masoul
    

    

    

    


    

        
{{message | mySlice}}