vue的過濾器通常用在一些常見的文本格式化,過濾器可以用在兩個地方:雙花括號插值和 v-bind 表達(dá)式。
成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的云龍網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
比如給價格自動加上中文的錢的字符“¥”或者是給一個時間段或(時間戳)相互之間的轉(zhuǎn)換過濾。
在javascript和jquery的年代!時間段的顯示或者是提交,都是要在顯示的時候要轉(zhuǎn)換下或者提交的時候轉(zhuǎn)換下,這樣就有點(diǎn)繁瑣了(個人用了vue后的感覺繁瑣了)。
不多說直接看例子如下:
filter定義的過濾器可以局部,可以全局的下面就直接說全局的
老樣子還是等先注冊一個全局的過濾器關(guān)鍵字(filter)
全局的注冊過濾器是在main.js這個文件里,當(dāng)然也可以單獨(dú)的一個js文件里
Vue.filter('dateconversion', function (value) { // 一個時間戳轉(zhuǎn)正常的過濾器 let date = new Date(value) // nuw 一個時間 let getHours // 小時 let getMinutes // 分 if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()} // 判斷小時是否小于10的補(bǔ)全:加0 if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()} // 判斷分是否小于10的補(bǔ)全:加0 return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ getHours +":"+ getMinutes // 返回轉(zhuǎn)換后的值 })
使用起來很方便的,可以在各個組件里凡事有要轉(zhuǎn)換顯示時間的都可以用
{{date | dateconversion}} // 使用方式,就是怎么簡單,整個項(xiàng)目隨便用
好了!簡單的介紹了過濾器使用方法和方式,下一章我會講稍微復(fù)雜點(diǎn),串聯(lián)過濾器和帶參數(shù)的過濾器。