vue過濾器filter的使用方法詳解

更新時間：2023年09月17日 11:47:09 作者：Hello_MrShu

這篇文章主要給大家介紹了關于vue過濾器filter的使用方法,Vue.js的過濾器(Filter)是一種可重用的功能,用于對文本進行格式化,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

vue允許自定義過濾器，我們通常用于對文本進行格式化一類的操作。如：將返回值 'abc' 設置為 'ABC' 顯示在頁面中；又或者，如果返回值為 'a' 頁面顯示 '張三'，返回值為 'b' 頁面顯示 '李四'。總之，對當前文本的各種操作，幾乎都可以用filter來解決。

注意：過濾器僅可以在兩個地方使用：1、花括號中；2、v-bind中；

// 在花括號中使用
<div>{{ message | msgFilter }}</div>
// 在v-bind中使用
<div v-bind:id="rawId | idFilter"></div>

一、全局過濾器

vue項目中創(chuàng)建全局過濾器：在main.js中注冊全局過濾器，且必須放在vue實例創(chuàng)建之前。然后才可以在各個組件中使用。

//main.js
Vue.filter('filter1',function(value){
    return value.chartAt(0).toUpperCase()+value.slice(1)
})
new Vue({
    //.......
})

二、局部過濾器

局部過濾器，在組件中定義，與data，created，methods等同級。

filters：{
    filter1：function(value){
        return value.chartAt(0).toUpperCase()+value.slice(1)
    }
}

三、多個過濾器串聯(lián)

我們在應用中，可以依次使用兩個或多個過濾器，每個過濾器的參數(shù)為上一次過濾器返回的結(jié)果。

<div> {{ message | filter1 | filter2 }} </div>

在以上例子中，有兩個過濾器 filter1 和 filter2。首先會將 message 傳入 filter1 中進行第一次處理，然后再將 filter1 的處理結(jié)果，傳遞到 filter2 中進行第二次處理，最終，將filter2的處理結(jié)果渲染到頁面中。

四、過濾器添加參數(shù)

過濾器同樣是一個js函數(shù)，因此可以添加參數(shù)。

<div> {{ message | filter1('param1','param2') }} </div>

如上所示，filter1 有一個默認參數(shù) message ，我們自定義添加了兩個參數(shù) 'param1' 和 'param2'，此時，在實際的過濾器函數(shù)中一共接收到三個參數(shù)：message，'param1'，'param2'；

filters：{
    filter1：function(value,value1,value2){
        console.log(value)   // message變量的值
        console.log(value1)  // param1
        console.log(value2)  // param2
    }
}

五、過濾器 this 指向問題

filter過濾器中的this指向，并不是vue中的this，而是undefined；

因此，如果我們想要獲取data中的數(shù)據(jù)，有兩種方法：1、改變this指向；2、傳參；

1、改變this 指向

<template>
  <div class="file-bg"> {{ fileObj | typeFilter}} </div>
</template>
<script>
  let that;
  export default {
    data(){
	  return{
		fileObj:{type:'file'},
        classObj:{file:'file-img'}
      }
    },
    beforeCreate(){
      that = this;
    },
    filters:{
	  typeFilter:function(obj){
        console.log(that.classObj)
      }
    }
  }
</script>

2、傳參

<template>
  <div class="file-bg"> {{ fileObj | typeFilter(classObj) }} </div>
</template>
<script>
  export default {
    data(){
	  return{
		fileObj:{type:'file'},
        classObj:{file:'file-img'}
      }
    },
    filters:{
	  typeFilter:function(obj,classObj){
        console.log(obj)
        console.log(classObj)
      }
    }
  }
</script>