寫在前面： 我是「揚帆向海」，這個暱稱來源於我的名字以及女朋友的名字。我熱愛技術、熱愛開源、熱愛編程。
技術是開源的、知識是共享的。
這博客是對自己學習的一點點總結及記錄，如果您對 Java、算法 感興趣，可以關注我的動態，我們一起學習。
用知識改變命運，讓我們的家人過上更好的生活。
一、過濾器介紹
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 | 必需。規定從何處開始選取。如果是負數，那麼它規定從數組尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。 |
| end | 可選。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數，那麼切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數，那麼它規定的是從數組尾部開始算起的元素 |
③ 返回值 ：
返回一個新的數組，包含從 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])
② 參數：
| 參數 | 描述 |
|---|---|
| targetLength | 當前字符串需要填充到的目標長度。如果這個數值小於當前字符串的長度，則返回當前字符串本身。 |
| padString 可選 | 填充字符串。如果字符串太長，使填充後的字符串長度超過了目標長度，則只保留最左側的部分，其他部分會被截斷。此參數的缺省值爲 " "（U+0020）。 |
③ 返回值：
在原字符串開頭填充指定的填充字符串直到目標長度所形成的新字符串。
借鑑網上的常用方法格式化時間
<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',
data: {
dateTime: new Date(),
},
// 定義一個局部的過濾器，格式化當前時間
filters: {
dateFormat: (dateTime, fmt) => {
var dt = new Date(dateTime)
return dt.format(fmt)
}
},
})
</script>
</body>
由於水平有限，本博客難免有不足，懇請各位大佬不吝賜教！