VUE中的filters過(guò)濾器使用方法
前言
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)指示。
<!-- 在雙花括號(hào)中 --> <div>{{ message | capitalize }}</div> <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>
一、全局過(guò)濾器
定義一個(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) })
在需要使用的組件使用:
<div>{{1516101106 | millisecond}}</div>
1、全局過(guò)濾器之單一掛載
/** * dateTmp:要過(guò)濾的值 * fmtTmp:傳入的參數(shù),可接收多個(gè)參數(shù) */ <template> <!-- 2021-12-20 19:14:18 --> <div>{{ 1639998858000 | dateFormat("yyyy/MM/dd HH:mm:ss") }}</div> </template> 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 });
2、全局過(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)用 <!-- 1234 --> <div>{{ '123456' | slice(4) }} </div>
二、組件過(guò)濾器
組件過(guò)濾器更簡(jiǎn)單,只需在對(duì)應(yīng)組件中定義 filters
即可,不過(guò)只針對(duì)本組件有效。
比如定義一個(gè)首字母大寫的過(guò)濾器:
//定義方法 export default { filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }
例子:
<template> <!-- 我要被過(guò)... --> <div>{{ msg | setSize }}</div> </template> <script> export default { data() { return { msg: "我要被過(guò)濾", }; }, filters: { setSize(value) { if (value.length > 4) { return value.splice(0, 4) + "..."; } else { return value; } }, }, }; </script>
到此這篇關(guān)于VUE中的filters過(guò)濾器使用方法的文章就介紹到這了,更多相關(guān)filters過(guò)濾器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue項(xiàng)目中引入ESLint校驗(yàn)代碼避免代碼錯(cuò)誤
這篇文章主要為大家介紹了Vue項(xiàng)目中引入ESLint插件校驗(yàn)代碼避免代碼錯(cuò)誤的使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07ruoyi-vue3 集成aj-captcha實(shí)現(xiàn)滑塊、文字點(diǎn)選驗(yàn)證碼功能
這篇文章主要介紹了 ruoyi-vue3 集成aj-captcha實(shí)現(xiàn)滑塊、文字點(diǎn)選驗(yàn)證碼,本文基于后端RuoYi-Vue 3.8.7 和 前端 RuoYi-Vue3 3.8.7,集成以AJ-Captcha文字點(diǎn)選驗(yàn)證碼為例,不需要鍵盤手動(dòng)輸入,極大優(yōu)化了傳統(tǒng)驗(yàn)證碼用戶體驗(yàn)不佳的問(wèn)題,感興趣的朋友一起看看吧2023-12-12Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享
這篇文章主要介紹了Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享,文章圍繞Vue?Vuex的相關(guān)資料展開(kāi)配置項(xiàng)和多組件數(shù)據(jù)共享的案例分享,需要的小伙伴可以參考一下2022-04-04vue返回上一頁(yè)面時(shí)不刷新問(wèn)題及解決方案
這篇文章主要介紹了vue返回上一頁(yè)面時(shí)不刷新問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05vue+elementui通用彈窗的實(shí)現(xiàn)(新增+編輯)
這篇文章主要介紹了vue+elementui通用彈窗的實(shí)現(xiàn)(新增+編輯),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01vue canvas繪制矩形并解決由clearRec帶來(lái)的閃屏問(wèn)題
這篇文章主要介紹了vue canvas繪制矩形并解決由clearRec帶來(lái)的閃屏問(wèn)題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09vue之this.$router.push頁(yè)面刷新問(wèn)題
這篇文章主要介紹了vue之this.$router.push頁(yè)面刷新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12vue實(shí)現(xiàn)下拉框篩選表格數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)下拉框篩選表格數(shù)據(jù),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09