filter怎么用

這篇文章給大家分享的是有關(guān)filter怎么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司自2013年起，先為都昌等服務(wù)建站，都昌等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為都昌企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1、自定義的過濾器，當然這包括注冊在全局和注冊在實例化的內(nèi)部

（1）注冊在全局的fliter

(1)全局方法 Vue.filter() 注冊一個自定義過濾器,必須放在Vue實例化前面

(2) 過濾器函數(shù)始終以表達式的值作為第一個參數(shù)。帶引號的參數(shù)視為字符串，而不帶引號的參數(shù)按表達式計算

(3)可以設(shè)置兩個過濾器參數(shù),前提是這兩個過濾器處理的不沖突

(4)用戶從input輸入的數(shù)據(jù)在回傳到model之前也可以先處理

  
    
    
    
    
  
  
    
      
{{message | sum}}
      
{{message | cal 10 20}}
 
      
{{message | sum | currency }}
 
       
    

    
  

filter是默認會傳入當前的item，而且filter的第一個參數(shù)默認就是當前的item。

（2）注冊在實例化內(nèi)部

上面的例子直接注冊在Vue全局上面,其他不用這個過濾器的實例也會被迫接受,其實過濾器可以注冊在實例內(nèi)部,僅在使用它的實例里面注冊

上面的程序改寫為:

  
    
    
    
    
  
  
    
      
{{message | sum}}
      
{{message | cal 10 20}}
 
      
{{message | sum | currency }}
 
       
    

    
  

2、使用js中的迭代函數(shù)filter

（1）實例一原文

var app5 = new Vue({
  el: '#app5',
  data: {
    shoppingList: [
      "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
    ],
    key: ""
  },
  computed: {
    filterShoppingList: function () {
      // `this` points to the vm instance
      var key = this.key;
      var shoppingList = this.shoppingList;
      //在使用filter時需要注意的是，前面調(diào)用的是需要使用filter的數(shù)組，而給filter函數(shù)傳入的是數(shù)組中的每個item，也就是說filter里面的函數(shù)，是每個item要去做的，并將每個結(jié)果返回。
      return shoppingList.filter(function (item) {
        return item.toLowerCase().indexOf(key.toLowerCase()) != -1
      });;
    }
  }
})
 

  Filter Key  
    
      {{ item }}
    
  

最終效果實現(xiàn)了根據(jù)關(guān)鍵字來過濾列表的功能。

其他的一些Js 迭代方法——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()

感謝各位的閱讀！關(guān)于“filter怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前文章：filter怎么用
URL網(wǎng)址：http://m.jiaotiyi.com/article/goeojd.html