vue過(guò)濾器filter的使用方法詳解
前言
vue允許自定義過(guò)濾器，我們通常用于對(duì)文本進(jìn)行格式化一類的操作。如：將返回值 'abc' 設(shè)置為 'ABC' 顯示在頁(yè)面中；又或者，如果返回值為 'a' 頁(yè)面顯示 '張三'，返回值為 'b' 頁(yè)面顯示 '李四'。總之，對(duì)當(dāng)前文本的各種操作，幾乎都可以用filter來(lái)解決。
注意：過(guò)濾器僅可以在兩個(gè)地方使用：1、花括號(hào)中；2、v-bind中；
// 在花括號(hào)中使用
<div>{{ message | msgFilter }}</div>
// 在v-bind中使用
<div v-bind:id="rawId | idFilter"></div>一、全局過(guò)濾器
vue項(xiàng)目中創(chuàng)建全局過(guò)濾器：在main.js中注冊(cè)全局過(guò)濾器，且必須放在vue實(shí)例創(chuàng)建之前。然后才可以在各個(gè)組件中使用。
//main.js
Vue.filter('filter1',function(value){
return value.chartAt(0).toUpperCase()+value.slice(1)
})
new Vue({
//.......
})二、局部過(guò)濾器
局部過(guò)濾器，在組件中定義，與data，created，methods等同級(jí)。
filters：{
filter1：function(value){
return value.chartAt(0).toUpperCase()+value.slice(1)
}
}三、多個(gè)過(guò)濾器串聯(lián)
我們?cè)趹?yīng)用中，可以依次使用兩個(gè)或多個(gè)過(guò)濾器，每個(gè)過(guò)濾器的參數(shù)為上一次過(guò)濾器返回的結(jié)果。
<div> {{ message | filter1 | filter2 }} </div>在以上例子中，有兩個(gè)過(guò)濾器 filter1 和 filter2。首先會(huì)將 message 傳入 filter1 中進(jìn)行第一次處理，然后再將 filter1 的處理結(jié)果，傳遞到 filter2 中進(jìn)行第二次處理，最終，將filter2的處理結(jié)果渲染到頁(yè)面中。
四、過(guò)濾器添加參數(shù)
過(guò)濾器同樣是一個(gè)js函數(shù)，因此可以添加參數(shù)。
<div> {{ message | filter1('param1','param2') }} </div>如上所示，filter1 有一個(gè)默認(rèn)參數(shù) message ，我們自定義添加了兩個(gè)參數(shù) 'param1' 和 'param2'，此時(shí)，在實(shí)際的過(guò)濾器函數(shù)中一共接收到三個(gè)參數(shù)：message，'param1'，'param2'；
filters：{
filter1：function(value,value1,value2){
console.log(value) // message變量的值
console.log(value1) // param1
console.log(value2) // param2
}
}五、過(guò)濾器 this 指向問(wèn)題
filter過(guò)濾器中的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過(guò)濾器filter的使用方法的文章就介紹到這了,更多相關(guān)vue過(guò)濾器filter使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue 組件復(fù)用多次自定義參數(shù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue3.0 vue.config.js 配置基礎(chǔ)的路徑問(wèn)題
這篇文章主要介紹了vue3.0 vue.config.js 配置基礎(chǔ)的路徑問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了uniapp的生命周期,應(yīng)用生命周期是指應(yīng)用程序從啟動(dòng)到關(guān)閉的整個(gè)過(guò)程，包括應(yīng)用程序的啟動(dòng)、前后臺(tái)切換、退出等,需要的朋友可以參考下2023-04-04
Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié)
本文主要介紹了Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
響應(yīng)式就是當(dāng)對(duì)象本身(對(duì)象的增刪值)或者對(duì)象屬性(重新賦值)發(fā)生變化時(shí),將會(huì)運(yùn)行一些函數(shù),最常見(jiàn)的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下2022-12-12
vue中的dom節(jié)點(diǎn)和window對(duì)象
這篇文章主要介紹了vue中的dom節(jié)點(diǎn)和window對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能的示例代碼
這篇文章主要介紹了vue 路由meta 設(shè)置導(dǎo)航隱藏與顯示功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue表單數(shù)據(jù)的綁定的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
解決vue單頁(yè)使用keep-alive頁(yè)面返回不刷新的問(wèn)題
下面小編就為大家分享一篇解決vue單頁(yè)使用keep-alive頁(yè)面返回不刷新的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vuex?是一個(gè)專為?Vue.js?應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下2023-01-01