您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)vue.js怎么使用filter,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
vue.js使用filter的方法:1、定義無參全局過濾器,代碼為【Vue.filter('msgFormat', function(msg)】;2、定義有參全局過濾器,代碼為【Vue.filter('msgFormat', funct】。
vue.js使用filter的方法:
vue中的過濾器分為兩種:局部過濾器和全局過濾器
1、定義無參全局過濾器
Vue.filter('msgFormat', function(msg) { // msg 為固定的參數(shù) 即是你需要過濾的數(shù)據(jù) return msg.replace(/單純/g, 'xxx') })
完整示例
<div id="app"> <p>{{ msg | msgFormat}}</p> </div> <script> // 定義一個 Vue 全局的過濾器,名字叫做 msgFormat Vue.filter('msgFormat', function(msg) { // 字符串的 replace 方法,第一個參數(shù),除了可寫一個 字符串之外,還可以定義一個正則 return msg.replace(/單純/g, 'xx') }) </script>
2、定義有參全局過濾器
<div id="app"> <p>{{ msg | msgFormat('瘋狂','--')}}</p> </div> <script> // 定義一個 Vue 全局的過濾器,名字叫做 msgFormat Vue.filter('msgFormat', function(msg, arg, arg2) { // 字符串的 replace 方法,第一個參數(shù),除了可寫一個 字符串之外,還可以定義一個正則 return msg.replace(/單純/g, arg+arg2) }) </script>
3、局部過濾器
局部過濾器的有參和無參的定義和使用方法與全局的過濾器一樣。唯一的區(qū)別在于局部過濾器是定義在vue的實例中。其作用的區(qū)域也是vue實例【#app】控制的區(qū)域
// 創(chuàng)建 Vue 實例,得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '曾經(jīng),我也是一個單純的少年,單純的我,傻傻的問,誰是世界上最單純的男人' }, methods: {}, //定義私用局部過濾器。只能在當前 vue 對象中使用 filters: { dataFormat(msg) { return msg+'xxxxx'; } } });
注意:
1、 當有局部和全局兩個名稱相同的過濾器時候,會以就近原則進行調(diào)用,即:局部過濾器優(yōu)先于全局過濾器被調(diào)用!
2、 一個表達式可以使用多個過濾器。過濾器之間需要用管道符“|”隔開。其執(zhí)行順序從左往右。
關(guān)于vue.js怎么使用filter就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。