Vue如何实现自带的过滤器-创新互联-古蔺大橙子建站

新闻中心

这里有您想知道的互联网营销解决方案

Vue如何实现自带的过滤器-创新互联

这篇文章将为大家详细讲解有关Vue如何实现自带的过滤器，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

目前成都创新互联已为成百上千家的企业提供了网站建设、域名、虚拟空间、网站改版维护、企业网站设计、固始网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

一过滤器写法

{{ message | Filter}}

二 Vue自带的过滤器:capitalize

功能:首字母大写



  
    
    Vue自带的过滤器
    
    
  
  
    
      {{message | capitalize}}

var myVue = new Vue({ el: ".test", data: { message: "abc" } })

上面代码输出:Abc

三 Vue自带的过滤器:uppercase

功能:全部大写



  
    
    Vue自带的过滤器
    
    
  
  
    
      {{message | uppercase}}

var myVue = new Vue({ el: ".test", data: { message: "abc" } })

上面代码输出:ABC

四 Vue自带的过滤器:uppercase

功能:全部小写



  
    
    Vue自带的过滤器
    
    
  
  
    
      {{message | lowercase}}

var myVue = new Vue({ el: ".test", data: { message: "ABC" } })

上面代码输出:abc

五 Vue自带的过滤器:currency

功能:输出金钱以及小数点

参数:

第一个参数 {String} [货币符号] - 默认值: '$'

第二个参数 {Number} [小数位] - 默认值: 2



  
    
    Vue自带的过滤器
    
    
  
  
    
      {{message | currency}} 
      {{message | currency '¥' "1"}}

var myVue = new Vue({ el: ".test", data: { message: "123.4673" } })

六 Vue自带的过滤器:pluralize

功能: 如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。

参数：{String} single, [double, triple, ...



  
    
    Vue自带的过滤器
    
    
  
  
    
    {{message}}  {{message | pluralize 'item'}} 
    
      
        
          {{item}}  {{item | pluralize 'item'}} 
        
      
      
      
        
          {{item}}  {{item | pluralize 'st' 'rd'}} 
        
      
      
      
        
          {{item}}  {{item | pluralize 'item'}} 
        
      
      
      
        
          {{item}}  {{item | pluralize 'st' 'rd'}}

var myVue = new Vue({ el: ".test", data: { message: 1, lili: [1,2,3], man: { name1: 1, name2: 2, name3: 3 } } })

七 Vue自带的过滤器:debounce

(1)限制：需在@里面使用

(2)参数:{Number} [wait] - 默认值： 300

(3)功能：包装处理器，让它延迟执行 x ms，默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms，如果在延迟结束前再次调用，延迟时长重置为 x ms。



  
    
    Vue自带的过滤器
    
    
  
  
    
      点击我,我将10秒后消失

var myVue = new Vue({ el: ".test", methods: { disappear: function () { document.getElementById("btn").style.display= "none"; } } })

八 Vue自带的过滤器:limitBy

(1)限制:需在v-for(即数组)里面使用

(2)两个参数:

第一个参数:{Number} 取得数量

第二个参数:{Number} 偏移量



  
    
    Vue自带的过滤器
    
    
  
  
    
       
        {{item}}
      
       
        {{item}}

var myVue = new Vue({ el: ".test", data: { lili: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] } })

九 Vue自带的过滤器:filterBy

(1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数: {String | Function} 需要搜索的字符串

第二个参数: in (可选,指定搜寻位置)

第三个参数: {String} (可选,数组格式)



  
    
    Vue自带的过滤器
    
    
  
  
    
       
        {{item}}
      
      
       
        {{item.name}}
      
      
       
        {{item.name+"+"+item.dada}}

var myVue = new Vue({ el: ".test", data: { lili: ["oi", "oa", "ll", "lo" ,"ouo" ,"kk" ,"oala"], man: [ //此处注意man是数组,不是对象 {name: "lily"}, {name: "lucy"}, {name: "oo"}, {dada: "lsh"}, {dada: "ofg"} ] } })

十 Vue自带的过滤器:orderBy

(1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数: {String | Array | Function} 需要搜索的字符串

第二个参数: {String} 可选参数 order 决定结果升序（order >= 0）或降序（order < 0）,默认是升序



  
    
    Vue自带的过滤器
    
    
  
    
    
      
       
        {{item}}
      
      
       
        {{item}}
      
      
      
       
        {{item.name}}
      
      
       
        {{item.name}}
      
      
      
       
        {{item.name}}

新闻中心

vue是什么

其他资讯