vue 過濾器filter實例詳解
vue的過濾器一般在JavaScript 表達式的尾部，由“|”符號指示：
過濾器可以讓我們的代碼更加優(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ù)，表達式 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)進行一系列的處理，最終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實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue單頁緩存存在的問題及解決方案(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
今天小編就為大家分享一篇Vue filter格式化時間戳時間成標準日期格式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了如何基于vue2實現(xiàn)簡單的答題組件,點擊正確的選項,該選項背景變綠色；點擊錯誤的選項,該選項背景變紅色,有需要的可以參考下2024-12-12
vue音樂播放器插件vue-aplayer的配置及其使用實例詳解
本篇文章主要介紹了vue音樂播放器插件vue-aplayer的配置及其使用實例詳解，具有一定的參考價值，有興趣的可以了解一下2017-07-07
Vue.$set 失效的坑 問題發(fā)現(xiàn)及解決方案
這篇文章主要介紹了Vue.$set 失效的坑 問題發(fā)現(xiàn)及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
本篇文章主要介紹了在基于vue-cli的項目自定義打包環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
SpringBoot結(jié)合Vue3實現(xiàn)簡單的前后端交互
本文主要介紹了SpringBoot結(jié)合Vue3實現(xiàn)簡單的前后端交互,結(jié)合實際案例,說明了如何實現(xiàn)前后端數(shù)據(jù)的交互,具有一定的?參考價值,感興趣的可以了解一下2023-08-08
Element Plus 是一個基于 Vue 3 的現(xiàn)代前端UI框架,它旨在提升開發(fā)體驗,并為開發(fā)者提供高效、優(yōu)雅的組件,在本文中將詳細介紹如何在 Vue 3 項目中安裝 Element Plus,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了Vue SSR 即時編譯技術(shù)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要給大家介紹了關(guān)于axios如何全局注冊的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用axios具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01