vue過濾器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>總結(jié)
到此這篇關于vue過濾器filter的使用方法的文章就介紹到這了,更多相關vue過濾器filter使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue 組件復用多次自定義參數(shù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue3.0 vue.config.js 配置基礎的路徑問題
這篇文章主要介紹了vue3.0 vue.config.js 配置基礎的路徑問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了uniapp的生命周期,應用生命周期是指應用程序從啟動到關閉的整個過程，包括應用程序的啟動、前后臺切換、退出等,需要的朋友可以參考下2023-04-04
Vue3結(jié)合TypeScript項目開發(fā)實踐總結(jié)
本文主要介紹了Vue3結(jié)合TypeScript項目開發(fā)實踐總結(jié)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
響應式就是當對象本身(對象的增刪值)或者對象屬性(重新賦值)發(fā)生變化時,將會運行一些函數(shù),最常見的就是render函數(shù),下面這篇文章主要給大家介紹了關于Vue3響應式原理的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue中的dom節(jié)點和window對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue 路由meta 設置導航隱藏與顯示功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了vue表單數(shù)據(jù)的綁定的相關資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-07-07
下面小編就為大家分享一篇解決vue單頁使用keep-alive頁面返回不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vuex?是一個專為?Vue.js?應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化，這篇文章主要介紹了Vue?中?store?基本用法,需要的朋友可以參考下2023-01-01