一、過濾器的分類與語法格式

1、本地過濾器（局部過濾器）：

var vm = new Vue({filters:{} })

例一：實現一個對首字母大寫的過濾器

<!-- 過濾器可以使用于{{}}文本插值和v-bind指令中 --> <div id="filter"><h4>例1：實現一個對數據首字母大寫的過濾器</h4><p>{{name | capitalize}}</p><a href="" :title="title | zhifou">知否知否，應是綠肥紅瘦</a> </div> var filter = new Vue({el:'#filter',data:{name:'zanilia',message:'family',title:'知否'},filters:{capitalize:value=>{//value 將來使用過濾器的數據的取值return value.charAt(0).toUpperCase() + value.slice(1);},zhifou:value=>{return value + "--趙麗穎"}} })

2、全局過濾器

定義在所有Vue實例以外的過濾器被稱為“全局過濾器”。

例二、實現所有字母大寫

<div id="filter"><h4>例2：實現所有字母大寫</h4><p>{{message | upper}}</p> </div> Vue.filter('upper',value=>{return value.toUpperCase() })

二、帶參數的過濾器

例3：制作一個名為readMore的過濾器，將指定字符個數以外的文本利用省略符實現

<div id="filter2"><h4>例3：制作一個名為readMore的過濾器，將指定字符個數以外的文本利用省略符實現</h4><p>{{sheng | readMore('132','...')}}</p> </div> var filter2 = new Vue({el:'#filter2',data:{sheng:'盛明蘭出生于江南官宦人家，身為家中最不受寵愛的女兒，自幼所處父親不重視，姐妹欺壓難纏的困境，不僅生存艱難，深宅之中更處處深藏意想不到的危機所幸明蘭知命卻不受命運擺弄，在萬般打壓之下依然自強自立，一路小心謹慎洞察世事，憑借自己的聰慧隱忍與祖母的栽培點撥，從在家中備受冷落欺凌，到成為影響著家族興榮的舉足輕重的人物，一路完成從閨閣少女到侯門主母的前進勵志人生之路。'},filters:{readMore:function(text,length,char){/*text作為第一個參數，永遠表示需要過濾的數據*/return text.slice(0,length) + char;}} })

三、過濾器的串聯

例4：對數據保留兩位小數并添加貨幣符號

<div id="number"><h4>例4：對數據保留兩位小數并添加貨幣符號(過濾器的串聯)</h4>{{price | sumA(2) | sumB('￥')}} </div> var number = new Vue({el:'#number',data:{price:156.2349},filters:{sumA:function(price,n){/*toFixed(n):將數值轉換為定點實數的形式的字符串，且保留n位小數并四舍五入。*/return price.toFixed(n)},sumB:function(price,char){return char + price}} })

總結

以上是生活随笔為你收集整理的Vue自定义域过滤器和管道符的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。