04、Vue.js---自定义过滤器
生活随笔
收集整理的這篇文章主要介紹了
04、Vue.js---自定义过滤器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
? ? 自定義過濾器的關鍵字是 filter。
????官網描述：Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式?(后者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示：
<!-- 在雙花括號中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>? ? 官網中提到的 管道 的關鍵字是“|”，其格式是：{{ data | fun }}。
? ? 自定義過濾器的作用：在數據顯示之前，對數據進行處理包裝。過濾器也分為全局過濾器（filter）和局部過濾器(filters)。具體用法見代碼及注釋部分：
js代碼部分：
window.onload = function (){// 定義全局過濾器Vue.filter("test",function(data){// 形參data的實參是管道{{ data | fun }}中 datareturn data >=10;});new Vue({el:"#app",data:{num:0,today:new Date()},// 定義局部過濾器filters:{// 定義局部過濾器，將以為數字前補0，其他的原樣輸出addZero:function(data){return data>=10 ? data : "0"+data;},// 過濾器帶多個參數dateFormat:function(data,arg1,arg2){// 可以打印 arg1/arg2 看看結果// console.log(arg1);// console.log(arg2);let year = data.getFullYear();let m = data.getMonth()+1;let day = data.getDate();return year+arg1+m+arg1+day;}}}); }html代碼部分：
<body><div id="app"><input type="text" v-model="num"><div>{{ num }}</div><!-- 使用管道 {{ data | fun }} --><p>通過全局過濾器 test 判斷 num 是否 >=10</p><div>{{ num | test }}</div><hr/><p>通過局部過濾器 addZero，將以為數字前補0，其他的原樣輸出</p><div>{{ num | addZero }}</div><hr/><p>管道前的參數永遠都是過濾器方法的第一個參數，<br/>過濾器方法括號中所定義的參數，以第二位參數開始向后順序排列</p><div>{{ today | date-format("-","參數二") }}</div></div> </body>?
至此，完畢。感謝您的閱讀。
比你牛逼的人還在努力，我們有什么理由選擇安逸。
轉載于:https://my.oschina.net/u/3563169/blog/1577690
總結
以上是生活随笔為你收集整理的04、Vue.js---自定义过滤器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [C++程序语言设计笔记一]面向对象编程
- 下一篇： html5倒计时秒杀怎么做,vue 设