vue 過濾器filter實(shí)例詳解
vue的過濾器一般在JavaScript 表達(dá)式的尾部，由“|”符號指示：
過濾器可以讓我們的代碼更加優(yōu)美，一般可以用在時間格式化，首字母大寫等等。
例如：{{ date | dateFormat }}這是過濾器的寫法；{{ dateFormat(date) }}這是函數(shù)調(diào)用的寫法
可以看出過濾器的寫法更加語義化，讓人一眼可以看出它的含義。
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 也可以串聯(lián)多個過濾器 -->
{{ message | filterA | filterB }}
// 在這個例子中，filterA 被定義為接收單個參數(shù)的過濾器函數(shù)，表達(dá)式 message 的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個參數(shù)的過濾器函數(shù) filterB，將 filterA 的結(jié)果傳遞到 filterB 中
<!-- 過濾器接收參數(shù) -->
{{ message | capitalize('string', obj) }}
// 這里的參數(shù)將在過濾器函數(shù)內(nèi)以第二個參數(shù)開始算起第一個參數(shù)為要過濾的值message，即'string'為第二個參數(shù)，obj為第三個參數(shù)。
過濾器方法在接收到參數(shù)后，你可以在方法內(nèi)進(jìn)行一系列的處理，最終return出處理結(jié)果即可。
1、過濾器可以是組件內(nèi)的
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
2、過濾器也可以是掛載在全局Vue里
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
總結(jié)
以上所述是小編給大家介紹的vue 過濾器filter實(shí)例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue單頁緩存存在的問題及解決方案(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue filter格式化時間戳?xí)r間成標(biāo)準(zhǔn)日期格式的方法
今天小編就為大家分享一篇Vue filter格式化時間戳?xí)r間成標(biāo)準(zhǔn)日期格式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了如何基于vue2實(shí)現(xiàn)簡單的答題組件,點(diǎn)擊正確的選項(xiàng),該選項(xiàng)背景變綠色；點(diǎn)擊錯誤的選項(xiàng),該選項(xiàng)背景變紅色,有需要的可以參考下2024-12-12
vue音樂播放器插件vue-aplayer的配置及其使用實(shí)例詳解
本篇文章主要介紹了vue音樂播放器插件vue-aplayer的配置及其使用實(shí)例詳解，具有一定的參考價值，有興趣的可以了解一下2017-07-07
Vue.$set 失效的坑 問題發(fā)現(xiàn)及解決方案
這篇文章主要介紹了Vue.$set 失效的坑 問題發(fā)現(xiàn)及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
如何在基于vue-cli的項(xiàng)目自定義打包環(huán)境
本篇文章主要介紹了在基于vue-cli的項(xiàng)目自定義打包環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡單的前后端交互
本文主要介紹了SpringBoot結(jié)合Vue3實(shí)現(xiàn)簡單的前后端交互,結(jié)合實(shí)際案例,說明了如何實(shí)現(xiàn)前后端數(shù)據(jù)的交互,具有一定的?參考價值,感興趣的可以了解一下2023-08-08
Vue 3項(xiàng)目如何安裝Element-Plus
Element Plus 是一個基于 Vue 3 的現(xiàn)代前端UI框架,它旨在提升開發(fā)體驗(yàn),并為開發(fā)者提供高效、優(yōu)雅的組件,在本文中將詳細(xì)介紹如何在 Vue 3 項(xiàng)目中安裝 Element Plus,感興趣的朋友一起看看吧2024-07-07
Vue SSR 即時編譯技術(shù)的實(shí)現(xiàn)
這篇文章主要介紹了Vue SSR 即時編譯技術(shù)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要給大家介紹了關(guān)于axios如何全局注冊的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01