Vue--过滤器

vue – 过滤器

一、Vue提供的过滤器

vue本身提供了很多便利的过滤器，这里列举一下，具体的可以参考官方文档过滤器。

例子中使用到的data和methods

data:{
        message: 'hello world',
        money: 12345,
        num: [1,2,3,4,5],
        obj: {
            name: 'Linda',
            age: 39,
            sex: 'male'
        },
        arr:[{
            name: 'lily',
            age: 23
        },{
            name: 'lisa',
            age: 24
        },{
            name: 'linda',
            age: 25
        },{
            name: 'tom',
            age: 26
        },{
            name: 'susie',
            age: 21
        }]
    }，
   //用于测试debounce的控制器
     methods: {
        fade: function(){
            document.getElementById('btn-fade').style.display = 'none';
       }
    },

示例和运行结果截图

• json：输出经JSON.stringify()处理后的结果

  
      
  
          格式化json
      
      {{ obj | json }}
  
  

  

  若不使用json过滤器，则结果如下图，这应该并不是我们想要的。

  

• capitalize：首字母大写

  
      
  
          capitalize首字母大写:
      
      {{ message | capitalize }}
  
  

  

• uppercase：转化为大写表示

  
      
  
          uppercase转换为大写表示:
      
      {{ message | uppercase }}
  
  

  

• lowercase：转化为小写表示

  
      
  
          lowercase转换为小写表示:
      
      {{ 'HELLO WORLD' | lowercase }}
  
  

  

• currency： 格式化货币表示

  
      
  
          currency输出货币表示第一个参数表示货币符号(默认为$),第二个参数是要保留的小数位数(默认为两位):
      
      {{ money | currency '£' 1 }}
  
  

  

• pluralize： 给值添加后缀

  
      
  
          pluralize如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。
              如果值的个数多于参数的个数，多出的使用最后一个参数
      
      
  
          
  
              {{ item }}{{ item | pluralize 'st' 'nd' 'rd' 'th' }}
          
      
  
  

  

• debounce： 延迟执行处理器

  
      
  
          debounce包装处理器,让它延迟执行x秒,默认延迟300ms:
          点击我,我将在3s后消失
      
  
  

  

• limitBy： 输出数组中从偏移量位置(1)开始,一共4个元素

  
      
  
          limitBy输出数组中从偏移量位置(num2)开始,一共num1个元素:
          {{ item }},
      
  
  

  

• filterBy： 输出指定字符索引的值

  
      
  
          输出arr中包含字母'l'的name
      
      
  
          
  {{ item.name }}
      
   
  
  

  

• orderBy： 对给定的数组中的元素进行排序

  
      
  
          通过年龄大小进行排序,默认升序.第二个参数的值>0(升序),<0(降序)
      
      
  
          
  {{ item.name }}
      
  
  

  

二、自定义过滤器

JS部分

    //自定义过滤器
    filters: {
        reverse: function(value){
            return value.split('').reverse().join('')
        }
    }

Html部分

     

         过滤器的本质就是一个函数
         
{{message | reverse}}