Vue学习之旅Part3：Vue的全局过滤器和私有过滤器

不念不忘少年蓝@ 2023-05-21 11:48 83阅读 0赞

Vue允许**自定义过滤器** 可被用作一些常见的**文本格式化**

过滤器可以用在两个地方：**mustache插值表达式** 和 **v-bind表达式**

过滤器应被添加在JavaScript表达式的**尾部** 由“管道”符指示(管道符就是一个竖杠：`|`)

# 一、全局过滤器 #

### 全局过滤器调用时的基本格式： ###

通过管道符\[`|`\]来进行过滤 例如`{ {name | nameOpe}}`  
定义过滤器的语法：`Vue.filter("过滤器名称",处理函数)`

处理函数的第一个参数已被固定了 是`data` 即**管道符前面传递的数据**  
若要添加其它入参 只能添加在data的后面了

Vue.filter("",function(data)
    {
        
        return data+"123";
    })

*(上述例子中 该过滤器的功能就是给过滤器前面的数据加上"123"字符串)*

一个值得注意的地方是：过滤器并没有修改原数据 只是**在输出之前进行了一层处理**

<div id="app">
    	<p>{
       {msg | msgFormat}}</p>
    </div>

### 过滤器也可以传入参数 且还能传多个参数 ###

<div id="app">
    	
    	<p>{
       {msg | msgFormat("豪哥","111")}}</p>
    </div>

### 还能多次调用过滤器 被调用的过滤器会按顺序执行 ###

<div id="app">
    	
    	<p>{
       {msg | msgFormat("豪哥","111") | test}}</p>
    </div>

这两个过滤器组合起来 顺序执行 输出结果就是：  
![在这里插入图片描述][20200418191215644.png]

--------------------

# 二、私有过滤器 #

全局过滤器是能够被所有的Vue实例共享 因而得名  
那么 同理 私有过滤器就是**只能被定义的那个Vue实例**使用

过滤器的调用顺序 采用的是**就近原则**  
即 若有私有过滤器 则会优先使用私有过滤器 若没有私有过滤器 则会使用全局过滤器

每个过滤器有其自己的【**名称**】和【**处理函数**】

定义私有过滤器的时候 也是在Vue实例里定义的  
有个`filters`属性专门用来定义私有过滤器  
格式就是：`过滤器名:方法`

以一个日期格式转换过滤器作为例子：

<div id="app2">
    	<h3>{
       {date | dateFormat}}</h3>
    </div>

// 自定义私有过滤器
    var vm2=new Vue({
        
        el:'#app2',
        data:{
        
            date:new Date()
        },
        methods:{
        },
        // 定义私有过滤器
        filters:{
        
            dateFormat:function(dateStr,pattern="")
            {
        
                var dt=new Date(dateStr);
    
                var year=dt.getFullYear();
                var month=dt.getMonth()+1;
                var day=dt.getDate();
    
                if (pattern.toLowerCase()==="yyyy-mm-dd")
                {
        
                    return `${
          year}-${
          month}-${
          day}`;
                }
                else
                {
        
                    var hour=dt.getHours();
                    var minute=dt.getMinutes();
                    var second=dt.getSeconds();
    
                    return `${
          year}-${
          month}-${
          day} ${
          hour}:${
          minute}:${
          second}`;
                }
            }
        }
    })

--------------------

[20200418191215644.png]: /images/20230521/34bfeb624c63476f8022f97377c3b991.png