您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue.js的過濾器怎么使用的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價值,相信大家閱讀完這篇Vue.js的過濾器怎么使用文章都會有所收獲,下面我們一起來看看吧。
過濾器用于進(jìn)行文本內(nèi)容格式化處理。
過濾器可以在插值表達(dá)式和 v-bind 中使用。
全局過濾器
局部過濾器
全局過濾器可以在任意Vue實(shí)例中使用。
語法書寫方式如下:
Vue.filter('過濾器名稱',function(value) { //邏輯代碼 return '處理結(jié)果'; })
注意:示例中的 | 豎線表示管道符。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>15.全局過濾器</title> </head> <body> <div id="app"> <p v-bind:title="value | filterA">這是標(biāo)簽</p> <p>{{ value | filterA }}</p> </div> <div id="app2"> <p v-bind:title="value | filterA">這是標(biāo)簽</p> <p>{{ value | filter}}</p> </div> <script src="../01.vue.js入門/js/vue-2.6.14.js"></script> <script> Vue.filter('filterA',function (value) { return value.split('-').join(''); }) new Vue({ el: '#app', data: { value: 'a-b-c' } }) new Vue({ el: '#app2', data: { value: 'a-b-c' } }) </script> </body> </html>
• 全局過濾器可以將一個數(shù)據(jù)傳入到多個過濾器中進(jìn)行處理。
<body> <div id="app"> <p>{{ value | filterA | filterB }}</p> </div> <script src="../01.vue.js入門/js/vue-2.6.14.js"></script> <script> Vue.filter('filterA',function (value){ console.log(value + ' filterA'); return value.split('-').join(''); }) Vue.filter('filterB',function (value) { console.log(value + ' filterB'); return value[0].toUpperCase() + value.slice(1); }) new Vue({ el: '#app', data: { value: 'a-b-c' } }) </script> </body>
• 一個過濾器可以傳入多個參數(shù)。
<body> <div id="app"> <!-- 注意:參數(shù)1永遠(yuǎn)是管道符左邊的value --> <p>{{ value | filterC('TGW—',200)}}</p> </div> <script src="../01.vue.js入門/js/vue-2.6.14.js"></script> <script> Vue.filter('filterC', function(par1,par2,par3) { console.log(par1,par2,par3); return par2 + par1.split('-').join(''); }); new Vue({ el: '#app', data: { value: 'a-b-c' } }) </script> </body>
• 局部過濾器只能在當(dāng)前 Vue 實(shí)例中使用。其他的Vue實(shí)例中無法訪問。
<div id="app"> <p>{{ content | filterA }}</p> <p>{{ content2 | filterA }}</p> <p>{{ content | filterA | filterB }}</p> <p>{{ content | filterA | filterC('TGW—')}}</p> </div> <!-- <div id="app2"> <p>{{ content | filterA }}</p> </div> --> <script src="../01.vue.js入門/js/vue-2.6.14.js"></script> <script> new Vue({ el: '#app', data: { content: 'a-b-c', content2: 'd-e-f' }, filters: { filterA: function (value){ console.log(value); return value.split('-').join('') }, filterB: function (value) { return value.split('').reverse().join('') }, filterC (value,prefix) { return prefix + value; } } }) // new Vue({ // el: '#app2', // data: { // content: 'g-h-i' // } // }) </script> </body>
當(dāng)我們出現(xiàn)全局過濾器和局部過濾器名字一樣時,那么我們再執(zhí)行的時候,是按照就近原則進(jìn)行執(zhí)行的,所以執(zhí)行的是局部過濾器的代碼塊。
<body> <div id="app"> <p>{{ content | filterA }}</p> </div> <script src="../01.vue.js入門/js/vue-2.6.14.js"></script> <script> Vue.filter('filterA', function (value){ return value.split('').reverse().join('') }) new Vue({ el: '#app', data: { content: 'a-b-c' }, filters: { filterA (value) { return value.split('-').join('') } } }) </script> </body>
關(guān)于“Vue.js的過濾器怎么使用”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“Vue.js的過濾器怎么使用”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。