vue過濾器filter的使用方法詳解
前言
vue允許自定義過濾器，我們通常用于對(duì)文本進(jìn)行格式化一類的操作。如：將返回值 'abc' 設(shè)置為 'ABC' 顯示在頁(yè)面中；又或者，如果返回值為 'a' 頁(yè)面顯示 '張三'，返回值為 'b' 頁(yè)面顯示 '李四'?？傊瑢?duì)當(dāng)前文本的各種操作，幾乎都可以用filter來解決。
注意：過濾器僅可以在兩個(gè)地方使用：1、花括號(hào)中；2、v-bind中；
// 在花括號(hào)中使用
<div>{{ message | msgFilter }}</div>
// 在v-bind中使用
<div v-bind:id="rawId | idFilter"></div>一、全局過濾器
vue項(xiàng)目中創(chuàng)建全局過濾器：在main.js中注冊(cè)全局過濾器，且必須放在vue實(shí)例創(chuàng)建之前。然后才可以在各個(gè)組件中使用。
//main.js
Vue.filter('filter1',function(value){
return value.chartAt(0).toUpperCase()+value.slice(1)
})
new Vue({
//.......
})二、局部過濾器
局部過濾器，在組件中定義，與data，created，methods等同級(jí)。
filters：{
filter1：function(value){
return value.chartAt(0).toUpperCase()+value.slice(1)
}
}三、多個(gè)過濾器串聯(lián)
我們?cè)趹?yīng)用中，可以依次使用兩個(gè)或多個(gè)過濾器，每個(gè)過濾器的參數(shù)為上一次過濾器返回的結(jié)果。
<div> {{ message | filter1 | filter2 }} </div>在以上例子中，有兩個(gè)過濾器 filter1 和 filter2。首先會(huì)將 message 傳入 filter1 中進(jìn)行第一次處理，然后再將 filter1 的處理結(jié)果，傳遞到 filter2 中進(jìn)行第二次處理，最終，將filter2的處理結(jié)果渲染到頁(yè)面中。
四、過濾器添加參數(shù)
過濾器同樣是一個(gè)js函數(shù)，因此可以添加參數(shù)。
<div> {{ message | filter1('param1','param2') }} </div>如上所示，filter1 有一個(gè)默認(rèn)參數(shù) message ，我們自定義添加了兩個(gè)參數(shù) 'param1' 和 'param2'，此時(shí)，在實(shí)際的過濾器函數(shù)中一共接收到三個(gè)參數(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>總結(jié)
到此這篇關(guān)于vue過濾器filter的使用方法的文章就介紹到這了,更多相關(guān)vue過濾器filter使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
實(shí)例分析vue循環(huán)列表動(dòng)態(tài)數(shù)據(jù)的處理方法
本篇文章給大家詳細(xì)分享了關(guān)于vue循環(huán)列表動(dòng)態(tài)數(shù)據(jù)的處理方法以及相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們參考下。2018-09-09
這篇文章主要介紹了Vue3中使用pinia,本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例
這篇文章主要介紹了antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式
今天小編就為大家分享一篇vue2.0 獲取從http接口中獲取數(shù)據(jù),組件開發(fā),路由配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
基于vue實(shí)現(xiàn)新聞自下往上滾動(dòng)效果(示例代碼)
這篇文章主要介紹了vue新聞自下往上滾動(dòng)效果,當(dāng)鼠標(biāo)鼠標(biāo)放上暫停滾動(dòng)，鼠標(biāo)移出繼續(xù)滾動(dòng)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
vue中如何使用xlsx讀取excel文件實(shí)例代碼
在Vue中使用xlsx庫(kù)可以幫助我們讀取和寫入Excel文件,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用xlsx讀取excel文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web在線聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了bing Map 在vue項(xiàng)目中的使用,需要的朋友可以參考下2018-04-04
項(xiàng)目創(chuàng)建Vite是一個(gè)web開發(fā)構(gòu)建工具,由于其原生ES模塊導(dǎo)入方法,它允許快速提供代碼,下面這篇文章主要給大家介紹了關(guān)于Vite打包分割代碼的相關(guān)資料,需要的朋友可以參考下2022-09-09
vue element中axios下載文件（后端Python）
這篇文章主要介紹了vue element中axios下載文件（后端Python）的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05