最新Vue過濾器介紹及使用方法
過濾器
過濾器的兼容性
注意:Vue3中明確取消了過濾器這個功能,如果想使用只能在Vue2中進(jìn)行,如果所做的項(xiàng)目是Vue2的話,可以了解一下這個功能點(diǎn),至少會使用就行。
在企業(yè)級項(xiàng)目開發(fā)中:
如果使用的是2.x版本的vue,則依然可以使用過濾器相關(guān)功能
如果項(xiàng)目已經(jīng)升級到了3.x版本的vue,官方建議使用計算屬性或方法代替被剔除的過濾器功能,
過濾器(Filters)是 vue 為開發(fā)者提供的功能,常用于文本的格式化。過濾器可以用在兩個地方:插值表達(dá)式和v-bind屬性綁定。過濾器應(yīng)該被添加在JavaScrip表達(dá)式的尾部,由“管道符”進(jìn)行調(diào)用,案例如下:
<body> <div id="root"> <p>message的值是:{{message | capi}}</p> </div> <script src="vue.js"></script> <script> const vm = new Vue({ el:"#root", data:{ message:"hello Vue.js" }, //過濾器函數(shù),必須定義到filters節(jié)點(diǎn)之下,過濾器本質(zhì)上是函數(shù) filters:{ //注意:過濾器函數(shù)形參中的val,永遠(yuǎn)都是“管道符”前面的那個值 capi(val){ // console.log(val); // charAt()字符串方法,接收索引值,表示從字符串中把索引值對應(yīng)的字符獲取出來 const first = val.charAt(0).toUpperCase() // slice()字符串方法1,可以截取字符串,從指定索引值往后截取 const other = val.slice(1) //強(qiáng)調(diào):過濾器中一定要有返回值 return first+other } } }) </script> </body>
私有過濾器和全局過濾器
在filters節(jié)點(diǎn)下定義的過濾器,稱為“私有過濾器”,因?yàn)樗荒茉诋?dāng)前vm實(shí)例所控制的el區(qū)域內(nèi)使用。如上面設(shè)置的過濾器就是私有過濾器;如果希望在多個vue實(shí)例之間共享過濾器,則可以按照如下的格式定義全局過濾器:
// 全局過濾器 - 獨(dú)立于每個 vm 實(shí)例之外 // Vue.filter() 方法接收兩個參數(shù) // 第一個參數(shù):是全局過濾器的”名字“ // 第二個參數(shù):是全局過濾器的”處理函數(shù)“ Vue.filter('capi',(str)=>{ return str.charAt(0).toUpperCase() + str.slice(1) })
承接上面的例子我們可以看看全局過濾器和私有過濾器的區(qū)別:
<body> <div id="root"> <p>message的值 是:{{message | capi}}</p> </div> <div id="root1"> <p>message的值 是:{{message | capi}}</p> </div> <script src="vue.js"></script> <script> // 提醒大家一下:全局過濾器要放在Vue實(shí)例化代碼前面,不然會報錯 Vue.filter('capi',(str)=>{ // 為了區(qū)別全局過濾是否會對私有過濾進(jìn)行覆蓋,將全局過濾加一個特征 return str.charAt(0).toUpperCase() + str.slice(1)+'~~~' }) const vm = new Vue({ el:"#root", data:{ message:"hello Vue.js" }, filters:{ capi(val){ const first = val.charAt(0).toUpperCase() const other = val.slice(1) return first+other } } }) const vm1 = new Vue({ el:"#root1", data:{ message:"hello world" }, }) </script> </body>
注意點(diǎn):
1)要定義到 filters 節(jié)點(diǎn)下,本質(zhì)是一個函數(shù)
2)在過濾器函數(shù)中,一定要有return值
3)在過濾器的形參中,就可以獲取到“管道符”前面待處理的那個值
4)如果全局過濾器和私有過濾器名字一致,按照就近原則,調(diào)用的是“私有過濾器”
過濾器的連續(xù)調(diào)用
過濾器可以串聯(lián)地進(jìn)行調(diào)用,例如:
//在插值表達(dá)式中可以使用多個過濾器如下: //過濾器filterA從它前面的message得到的處理結(jié)果,將filterA的return返回值再交給filterB進(jìn)行處理 //最終把filterB處理的結(jié)果,作為最終的值渲染到頁面上 <div id="root"> {{message | filterA | filterB}} </div>
過濾器進(jìn)行傳參
過濾器本質(zhì)上是JavaScript函數(shù),因此可以接收參數(shù),格式如下:
<!-- arg1 和 arg2 是傳遞給 filterA 的參數(shù) --> <p>{{ message | filterA(arg1,arg2) }}</p> //過濾器處理函數(shù)的形參列表中: //第一個參數(shù):永遠(yuǎn)都是“管道符”前面待處理的值 //從第二個參數(shù)開始,才是調(diào)用過濾器時傳遞過來的 arg1 和 arg2 參數(shù) Vue.filter('filterA',(msg,agr1,arg2)=>{ //過濾器的代碼。。。 })
到此這篇關(guān)于最新Vue過濾器介紹及使用方法的文章就介紹到這了,更多相關(guān)vue過濾器使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于uniapp+vue3自定義增強(qiáng)版table表格組件「兼容H5+小程序+App端」
uv3-table:一款基于uniapp+vue3跨端自定義手機(jī)端增強(qiáng)版表格組件,支持固定表頭/列、邊框、斑馬紋、單選/多選,自定義表頭/表體插槽、左右固定列陰影高亮顯示,支持編譯兼容H5+小程序端+App端,H5+小程序+App端,多端運(yùn)行一致2024-05-05vue2.0 中使用transition實(shí)現(xiàn)動畫效果使用心得
這篇文章主要介紹了vue2.0 中使用transition實(shí)現(xiàn)動畫效果使用心得,本文通過案例知識給大家介紹的非常詳細(xì),需要的朋友參考下吧2018-08-08如何使用Webpack優(yōu)化Vue項(xiàng)目的打包流程
在開發(fā)基于Vue.js的應(yīng)用時,隨著項(xiàng)目規(guī)模的擴(kuò)大,單個文件的體積也會隨之增長,特別是當(dāng)涉及到大量的依賴庫和復(fù)雜的業(yè)務(wù)邏輯時,本文將詳細(xì)介紹如何使用Webpack來優(yōu)化Vue項(xiàng)目的打包流程,需要的朋友可以參考下2024-09-09vue3+vite2實(shí)現(xiàn)動態(tài)綁定圖片的優(yōu)雅解決方案
這篇文章主要為大家詳細(xì)介紹了vue3+vite2實(shí)現(xiàn)動態(tài)綁定圖片的優(yōu)雅解決方案,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08Vue-cli 如何將px轉(zhuǎn)化為rem適配移動端
這篇文章主要介紹了Vue-cli 如何將px轉(zhuǎn)化為rem適配移動端,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-07-07vue實(shí)現(xiàn)動態(tài)給data函數(shù)中的屬性賦值
這篇文章主要介紹了vue實(shí)現(xiàn)動態(tài)給data函數(shù)中的屬性賦值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09