vue定義私有過濾器和基本使用
更新時間：2021年11月22日 09:19:38 作者：huxiaoxiao
這篇文章主要介紹的是 vue定義私有過濾器和基本使用，下面文章圍繞vue定義私有過濾器的相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助
私有過濾器和全局過濾器的方法和概念都相同，只是一個是全局都可以調(diào)用，而私有的只有自己可以調(diào)用，
全局過濾器點這里全局過濾器
使用方法也和全局過濾器一致，只是定義的地方不同
全局過濾器是在
script 中 通過Vue.filter 定義私有過濾器定義方法：
<script>
let vm = new Vue({
el:'#app',
data:{
},
filters: { // 當前實例私有的過濾器
}
})
</script>
在
vm實列中，有和 data 同級的 filters，用來定義當前實例的私有過濾器
<div id="app">
<p>{{mes | addStr}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
mes:"我是一個悲觀的人，悲觀的人做悲觀的事"
},
filters: { // 當前實例私有的過濾器
addStr(data,str="開心"){
return data.replace(/悲觀/g,str)
}
}
})
</script>
輸出結(jié)果為：
如果頁面中 有第二個實例，
vm2，去調(diào)用 vm 中的過濾器，是調(diào)用不到的如果在頁面上有一個全局過濾器，和私有過濾器，是可以同時調(diào)用的
<div id="app">
<p>{{mes | setStr | addStr}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.filter('setStr',function(data){
return data+'我是全局過濾器'
})
let vm = new Vue({
el:'#app',
data:{
mes:"我是一個悲觀的人，悲觀的人做悲觀的事"
},
filters: { // 當前實例私有的過濾器
addStr(data,str="開心"){
return data.replace(/悲觀/g,str)
}
}
})
</script>
輸出結(jié)果：
總結(jié)：
在調(diào)用時我們在前面調(diào)用的 全局 ，后面是私有
但輸出結(jié)果卻是 私有過濾器先進行處理
所以，當同時調(diào)用全局和私有過濾器時，調(diào)用規(guī)則是誰離的近先輸出誰，
先私有在全局
到此這篇關(guān)于 vue定義私有過濾器和基本使用的文章就介紹到這了,更多相關(guān) vue定義私有過濾器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3使用自定義指令實現(xiàn)el dialog拖拽功能示例詳解
這篇文章主要為大家介紹了vue3使用自定義指令實現(xiàn)el dialog拖拽功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
vue中modal傳輸數(shù)據(jù)并刷新部分頁面數(shù)據(jù)方式
這篇文章主要介紹了vue中modal傳輸數(shù)據(jù)并刷新部分頁面數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3使用ref和reactive管理狀態(tài)的代碼示例
ref 和 reactive 是 Composition API 中用來聲明響應(yīng)式數(shù)據(jù)的兩個核心函數(shù),在 Vue 3 中,使用 setup 語法糖可以更簡潔地使用這些功能,本文將探討如何使用 ref 和 reactive 來管理狀態(tài),并解釋它們之間的區(qū)別,需要的朋友可以參考下2024-09-09
Vue3 openlayers加載瓦片地圖并手動標記坐標點功能
這篇文章主要介紹了 Vue3 openlayers加載瓦片地圖并手動標記坐標點功能,我們這里用vue/cli創(chuàng)建,我用的node版本是18.12.1,本文結(jié)合示例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-04-04
今天小編就為大家分享一篇vue之延時刷新實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
我們用Vue3開發(fā)項目時,常常需要面對的一個問題就是組件之間的通信,如何將數(shù)據(jù)發(fā)給對應(yīng)的組件,這是不可避免的一個問題,該篇講述了Vue3常用的6種組件通信方式,需要的朋友可以參考下2024-09-09
vue如何使用cookie、localStorage和sessionStorage進行儲存數(shù)據(jù)
這篇文章主要介紹了vue如何使用cookie、localStorage和sessionStorage進行儲存數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue3中關(guān)于setup與自定義指令，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
Vue+Vite+Axios項目多環(huán)境以及部署前后端跨域
本文介紹了如何在Vue+Vite+Axios項目中處理多環(huán)境部署和跨域問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-11-11
本文主要介紹了Vue3中v-for的使用方法,包括遍歷數(shù)組、遍歷對象、索引訪問、嵌套遍歷以及結(jié)合計算屬性和方法的使用,v-for可以幫助用戶動態(tài)地生成和管理列表數(shù)據(jù),并根據(jù)需要進行復(fù)雜的DOM操作,提供了多種示例,幫助讀者更好地理解和使用v-for2024-10-10