這篇文章主要為大家展示了“Vue中如何使用filters過(guò)濾器”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue中如何使用filters過(guò)濾器”這篇文章吧。
創(chuàng)新互聯(lián)長(zhǎng)期為1000多家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為嘉禾企業(yè)提供專(zhuān)業(yè)的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)，嘉禾網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
Vue.js 允許我們自定義過(guò)濾器，可被用于一些常見(jiàn)的文本格式化。過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)（{undefined{ }}）插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開(kāi)始支持)。過(guò)濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號(hào)指示。
{{ message | capitalize }}
定義一個(gè)全局過(guò)濾器很簡(jiǎn)單，只需要導(dǎo)出一個(gè)方法即可。
使用的時(shí)候很簡(jiǎn)單，只需要在入口文件全局引入此過(guò)濾器即可，使用 Vue.filter(key, value) 引入。
比如，Java后端返回的時(shí)間戳精確到秒，而JS中的時(shí)間戳是用毫秒表示，則可以定義一個(gè)轉(zhuǎn)換時(shí)間戳的全局過(guò)濾器:
重慶分公司
重慶分公司
//main.js
import Vue from 'vue'
Vue.filter('millisecond', (value) => {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})在需要使用的組件使用：
{{1516101106 | millisecond}}
全局過(guò)濾器之單一掛載
/** * dateTmp:要過(guò)濾的值 * fmtTmp:傳入的參數(shù)，可接收多個(gè)參數(shù) */{{ 1639998858000 | dateFormat("yyyy/MM/dd HH:mm:ss") }}Vue.filter('dateFormat', function (dateTmp, fmtTmp) { let fmt = fmtTmp let date = dateTmp if (!fmt) { fmt = 'yyyy.MM.dd' } if (!(date instanceof Date)) { date = new Date(date) } let o = { 'M+': date.getMonth() + 1, // 月份 'd+': date.getDate(), // 日 'h+': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, // 小時(shí) 'H+': date.getHours(), // 小時(shí) 'm+': date.getMinutes(), // 分 's+': date.getSeconds(), // 秒 'q+': Math.floor((date.getMonth() + 3) / 3), // 季度 'S': date.getMilliseconds() // 毫秒 } let week = { '0': '日', '1': '一', '2': '二', '3': '三', '4': '四', '5': '五', '6': '六' } if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } if (/(E+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '星期' : '周') : '') + week[date.getDay() + '']) } for (var k in o) { if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) } } return fmt });
全局過(guò)濾器之批量掛載
//定義方法
//filters.js
export function slice (temp,num) {
return temp.slice(0,num);
}//掛載
//main.js
import * as filters from '@/assets/js/filters';
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]);
});//調(diào)用{{ '123456' | slice(4) }}
組件過(guò)濾器更簡(jiǎn)單，只需在對(duì)應(yīng)組件中定義 filters 即可，不過(guò)只針對(duì)本組件有效。
比如定義一個(gè)首字母大寫(xiě)的過(guò)濾器：
//定義方法
export default {
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}例子例子
{{ msg | setSize }}
以上是“Vue中如何使用filters過(guò)濾器”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
