vue中的過濾器及其時間格式化問題
一、過濾器介紹
Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由 管道 符號指示：
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
二、全域性過濾器
在建立 Vue 例項之前全域性定義過濾器
【 程式碼示例 】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>過濾器</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<div>{{ msg | strUpper }}</div>
</div>
<script>
// 定義一個全域性過濾器，把字串的第一個字元轉換為大寫
Vue.filter('strUpper',function (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
})
var vm = new Vue({
el: '#app',data: {
msg: ''
}
})
</script>
</body>
</html>測試結果：
過濾器可以串聯。在一個插值表示式中可以使用多個過濾器，過濾器之間用管道符 隔開，過濾器從左到右的順序進行執行。
{{ message | filterA | filterB }}
在這個例子中，filterA 被定義為接收單個引數的過濾器函式，表示式 message的值將作為引數傳入到函式中。然後繼續呼叫同樣被定義為接收單個引數的過濾器函式 filterB，將 filterA 的結果傳遞到 filterB 中。
呼叫第一個過濾器會使輸入的字串第一個字元轉成大寫，呼叫第二個過濾器替換字串中的空格為逗號。
【 程式碼示例 】
<div>{{ msg | strUpper | strReplace }}</div>
Vue.filter('strReplace',function (str) {
return str.replace(/ /g,',')
})測試結果：
【 知識拓展 】
slice() 方法可從已有的陣列中返回選定的元素。
① 語法：
arrayObject.slice(start,end)
② 引數：
③ 返回值 ：
返回一個新的陣列，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。
三、區域性過濾器
定義一個區域性的過濾器，格式化當前時間
【 程式碼示例 】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="winowh=device-winowh,initial-scale=1.0">
<title>過濾器學習2</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div>當前時間是： {{ dateTime }}</div>
<div>格式化後的時間是： {{ dateTime | dateFormat }}</div>
</div>
<script>
var vm = new Vue({
el: '#app',data: {
dateTime: new Date(),},// 定義一個區域性的過濾器，格式化當前時間
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')
// 過濾器中要有返回值
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
})
</script>
</body>
</html>測試結果：
注意：
當有兩個名稱相同的全域性過濾器和區域性過濾器的時候，會以就近原則進行呼叫過濾器，區域性過濾器的優先順序高於全域性過濾器。
【 知識拓展 】
padStart() 可以在字串的開頭進行字元補全。
① 語法：
str.padStart(targetLength [,padString])
② 引數：
③ 返回值：
在原字串開頭填充指定的填充字串直到目標長度所形成的新字串。
借鑑網上的常用方法格式化時間
<body>
<div id="app">
<div>當前時間是： {{ dateTime }}</div>
<div>格式化後的時間是： {{ 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(),// 小時
"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',// 定義一個區域性的過濾器，格式化當前時間
filters: {
dateFormat: (dateTime,fmt) => {
var dt = new Date(dateTime)
return dt.format(fmt)
}
},})
</script>
</body>
總結
到此這篇關於vue中的過濾器及其時間格式化問題的文章就介紹到這了,更多相關vue 過濾器時間格式化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！