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