vue中的過(guò)濾器及其時(shí)間格式化問(wèn)題
一、過(guò)濾器介紹
Vue.js 允許你自定義過(guò)濾器，可被用于一些常見的文本格式化。過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。過(guò)濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由 管道 符號(hào)指示：
<!-- 在雙花括號(hào)中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id='rawId | formatId'></div>
二、全局過(guò)濾器
在創(chuàng)建 Vue 實(shí)例之前全局定義過(guò)濾器
【 代碼示例 】
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>過(guò)濾器</title> <script src='http://www.aoyou183.cn/bcjs/js/vue.js'></script></head><body> <div id='app'> <input type='text' v-model='msg'> <div>{{ msg | strUpper }}</div> </div> <script> // 定義一個(gè)全局過(guò)濾器，把字符串的第一個(gè)字符轉(zhuǎn)換為大寫 Vue.filter(’strUpper’, function (str) { return str.charAt(0).toUpperCase() + str.slice(1) }) var vm = new Vue({ el: ’#app’, data: {msg: ’’ } }) </script></body></html>
測(cè)試結(jié)果：
過(guò)濾器可以串聯(lián)。在一個(gè)插值表達(dá)式中可以使用多個(gè)過(guò)濾器，過(guò)濾器之間用管道符 隔開，過(guò)濾器從左到右的順序進(jìn)行執(zhí)行。
{{ message | filterA | filterB }}
在這個(gè)例子中，filterA 被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù)，表達(dá)式 message的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個(gè)參數(shù)的過(guò)濾器函數(shù) filterB，將 filterA 的結(jié)果傳遞到 filterB 中。
調(diào)用第一個(gè)過(guò)濾器會(huì)使輸入的字符串第一個(gè)字符轉(zhuǎn)成大寫，調(diào)用第二個(gè)過(guò)濾器替換字符串中的空格為逗號(hào)。
【 代碼示例 】
<div>{{ msg | strUpper | strReplace }}</div>Vue.filter(’strReplace’, function (str) { return str.replace(/ /g, ’,’)})
測(cè)試結(jié)果：
【 知識(shí)拓展 】
slice() 方法可從已有的數(shù)組中返回選定的元素。
① 語(yǔ)法：
arrayObject.slice(start,end)
② 參數(shù)：
③ 返回值 ：
返回一個(gè)新的數(shù)組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。
三、局部過(guò)濾器
定義一個(gè)局部的過(guò)濾器，格式化當(dāng)前時(shí)間
【 代碼示例 】
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='winowh=device-winowh, initial-scale=1.0'> <title>過(guò)濾器學(xué)習(xí)2</title> <script src='http://www.aoyou183.cn/bcjs/js/vue.js'></script></head><body> <div id='app'> <div>當(dāng)前時(shí)間是： {{ dateTime }}</div> <div>格式化后的時(shí)間是： {{ dateTime | dateFormat }}</div> </div> <script> var vm = new Vue({ el: ’#app’, data: {dateTime: new Date(), }, // 定義一個(gè)局部的過(guò)濾器，格式化當(dāng)前時(shí)間 filters: {dateFormat: (dateTime) => { var now = new Date(dateTime) var y = now.getFullYear() var m = (now.getMonth() + 1).toString().padStart(2, ’0’) var d = now.getDate().toString().padStart(2, ’0’) var hh = now.getHours().toString().padStart(2, ’0’) var mm = now.getMinutes().toString().padStart(2, ’0’) var ss = now.getSeconds().toString().padStart(2, ’0’) // 過(guò)濾器中要有返回值 return `${y}-${m}-$wyw2q2k ${hh}:${mm}:${ss}`} } }) </script></body></html>
測(cè)試結(jié)果：
注意：
當(dāng)有兩個(gè)名稱相同的全局過(guò)濾器和局部過(guò)濾器的時(shí)候，會(huì)以就近原則進(jìn)行調(diào)用過(guò)濾器，局部過(guò)濾器的優(yōu)先級(jí)高于全局過(guò)濾器。
【 知識(shí)拓展 】
padStart() 可以在字符串的開頭進(jìn)行字符補(bǔ)全。
① 語(yǔ)法：
str.padStart(targetLength [, padString])
② 參數(shù)：
③ 返回值：
在原字符串開頭填充指定的填充字符串直到目標(biāo)長(zhǎng)度所形成的新字符串。
借鑒網(wǎng)上的常用方法格式化時(shí)間
<body> <div id='app'> <div>當(dāng)前時(shí)間是： {{ dateTime }}</div> <div>格式化后的時(shí)間是： {{ dateTime | dateFormat(’yyyy-MM-dd hh:mm:ss’) }}</div> </div> <script> Date.prototype.format = function (format) { var dateMap = {'M+': this.getMonth() + 1, // 月份'd+': this.getDate(), // 日'h+': this.getHours(), // 小時(shí)'m+': this.getMinutes(), // 分's+': this.getSeconds(), // 秒'q+': Math.floor((this.getMonth() + 3) / 3), // 季度'S': this.getMilliseconds() // 毫秒 }; if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length)); for (var k in dateMap)if (new RegExp('(' + k + ')').test(format)) format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (dateMap[k]) : (('00' + dateMap[k]).substr(('' + dateMap[k]).length))); return format; } var vm = new Vue({ el: ’#app’, data: {dateTime: new Date(), }, // 定義一個(gè)局部的過(guò)濾器，格式化當(dāng)前時(shí)間 filters: {dateFormat: (dateTime, fmt) => { var dt = new Date(dateTime) return dt.format(fmt)} }, }) </script></body>
總結(jié)
到此這篇關(guān)于vue中的過(guò)濾器及其時(shí)間格式化問(wèn)題的文章就介紹到這了,更多相關(guān)vue 過(guò)濾器時(shí)間格式化內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
網(wǎng)公網(wǎng)安備