注意：過濾器函數接收的第一個值是message，依次是傳的其它值。
過濾器是可以疊加的，後面過濾器接收前面過濾器的傳回值。
過濾器對前面的那個值進行顯示的過濾并不會改變前面的那個值，即并不會改變data的資料。
不能直接使用data中的資料，可以通過傳遞參數的方式使用
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- {{}}中的|表示過濾器管道符,過濾器後面的為過濾函數 -->
<p>{{msg | msgFormat('瘋狂+1')}}</p>
<!-- 多個過濾函數進行調用 -->
<p>{{msg | msgFormat('瘋狂+1') | test}}</p>
<h2>{{time | dateFormat}}</h2>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
//過濾器的定義文法
//Vue.filter('過濾器的名稱',function () { })
//過濾器中的function,第一個參數data，已經被規定死，永遠都是過濾器管道符前面傳遞過來的資料
// 從第二個參數開始就是傳值
// Vue.filter('過濾器名稱',function(data){
// return data+123
// });
//定義一個Vue全局的過濾器，名字：msgFormat
Vue.filter('msgFormat',function(msg,param) {
//字元出中的replace方法，第一個參數，出了寫一個字元串之外，還可以定義一個正則
// return msg.replace('單純','邪惡');
// return msg.replace(/單純/g,'邪惡')
return msg.replace(/單純/g,param)
})
Vue.filter('test',function(msg) {
return msg+'love'
})
//如何定義一個私有過濾（局部）
var vm = new Vue({
el: '#app',
data: {
msg: '我也是一個單純的少年，單純到自己很可愛，我也會喜歡你',
time: new Date(),
},
//定義私有過濾器，過濾器有兩個條件[過濾器名稱 和 處理函數 ]
filters: {
/*
過濾器調用的時候，采用的是就近原則，
如果私有過濾器和全局過濾器名稱一緻了，這時候優先調用私有過濾器
*/
//param = '';es6的初始化值
dateFormat: function(time,param = ''){
var dt = new Date(time);
// yyyy-mm-dd
var y = dt.getFullYear();
// var m = dt.getMonth()+1;
var m = (dt.getMonth()+1).toString().padStart(2,'0');
var d = dt.getDate();
// return y+'-'+m+'-'+d;
//模闆字元串
// return `${y}-${m}-${d}`;
if(param.toLowerCase() === 'yyyy-mm-dd'){
return `${y}-${m}-${d}`;
}else{
var hh = dt.getHours().toString().padStart(2,'0');
var mm = dt.getMinutes().toString().padStart(2,'0');
var ss = dt.getSeconds().toString().padStart(2,'0');
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
}
},
methods: { }
})
</script>
</html>
全局過濾器：
效果圖
局部過濾器：
<template>
<div class="filters">
<div>姓名：{{msg | filterName(data1,that)}}</div>
</div>
</template>
<script>
export default {
name: "filters",
data() {
return {
that: this,
msg: "muzidigbug",
data1: "big"
};
},
filters: {
filterName(msg, data1, that) {
console.log(that.data1);
// return msg.replace(/bug/g,this.data1);這樣使用是錯誤的，可以通過傳值的方式傳遞data中的資料
return msg.replace(/bug/g, data1);
}
}
};
</script>
注意，不應該使用箭頭函數來定義 filters。
理由：箭頭函數綁定了父級作用域的上下文，是以 this 将不會按照期望指向 Vue 執行個體，嚴格模式下this 将是 undefined。
若有不足請多多指教！希望給您帶來幫助！