VUE中的filters過濾器使用方法
前言
Vue.js
允許我們自定義過濾器,可被用于一些常見的文本格式化。過濾器可以用在兩個地方:雙花括號({undefined{ }})
插值和 v-bind
表達式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript
表達式的尾部,由“管道”符號指示。
<!-- 在雙花括號中 --> <div>{{ message | capitalize }}</div> <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>
一、全局過濾器
定義一個全局過濾器很簡單,只需要導(dǎo)出一個方法即可。
使用的時候很簡單,只需要在入口文件全局引入此過濾器即可,使用 Vue.filter(key, value) 引入。
比如,Java后端返回的時間戳精確到秒,而JS中的時間戳是用毫秒表示,則可以定義一個轉(zhuǎn)換時間戳的全局過濾器:
//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、全局過濾器之單一掛載
/** * dateTmp:要過濾的值 * fmtTmp:傳入的參數(shù),可接收多個參數(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, // 小時 'H+': date.getHours(), // 小時 '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、全局過濾器之批量掛載
//定義方法 //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>
二、組件過濾器
組件過濾器更簡單,只需在對應(yīng)組件中定義 filters
即可,不過只針對本組件有效。
比如定義一個首字母大寫的過濾器:
//定義方法 export default { filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }
例子:
<template> <!-- 我要被過... --> <div>{{ msg | setSize }}</div> </template> <script> export default { data() { return { msg: "我要被過濾", }; }, filters: { setSize(value) { if (value.length > 4) { return value.splice(0, 4) + "..."; } else { return value; } }, }, }; </script>
到此這篇關(guān)于VUE中的filters過濾器使用方法的文章就介紹到這了,更多相關(guān)filters過濾器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ruoyi-vue3 集成aj-captcha實現(xiàn)滑塊、文字點選驗證碼功能
這篇文章主要介紹了 ruoyi-vue3 集成aj-captcha實現(xiàn)滑塊、文字點選驗證碼,本文基于后端RuoYi-Vue 3.8.7 和 前端 RuoYi-Vue3 3.8.7,集成以AJ-Captcha文字點選驗證碼為例,不需要鍵盤手動輸入,極大優(yōu)化了傳統(tǒng)驗證碼用戶體驗不佳的問題,感興趣的朋友一起看看吧2023-12-12Vue??vuex配置項和多組件數(shù)據(jù)共享案例分享
這篇文章主要介紹了Vue??vuex配置項和多組件數(shù)據(jù)共享案例分享,文章圍繞Vue?Vuex的相關(guān)資料展開配置項和多組件數(shù)據(jù)共享的案例分享,需要的小伙伴可以參考一下2022-04-04vue+elementui通用彈窗的實現(xiàn)(新增+編輯)
這篇文章主要介紹了vue+elementui通用彈窗的實現(xiàn)(新增+編輯),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01vue canvas繪制矩形并解決由clearRec帶來的閃屏問題
這篇文章主要介紹了vue canvas繪制矩形并解決由clearRec帶來的閃屏問題,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09