1、上篇已經介紹了全局過濾器的使用，“全局”顧名思義就是一次定義處處使用，可以被一個頁面里不同的Vue對象所使用，如下代碼所示： 這裡定義了兩個Vue對象分別綁定id為div1和div2的元素，在這兩個元素作用域里使用了全局過濾器formatData，運行的效果是一樣的，這就是全局過濾器。但是有的時 ...
1、上篇已經介紹了全局過濾器的使用，“全局”顧名思義就是一次定義處處使用，可以被一個頁面里不同的Vue對象所使用，如下代碼所示：
<body>
<div id="app1">
app1的時間格式化：{{dataStr | formatData}}
</div>
<div id="app2">
app2的時間格式化：{{dataStr | formatData}}
</div>
<script type="text/javascript">
Vue.filter('formatData',function(dataStr){
var newDate = new Date();
var y = newDate.getFullYear();
var m = newDate.getMonth() + 1;
var d = newDate.getDate();
var hh = newDate.getHours();
var mm = newDate.getMinutes();
var ss = newDate.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
});
var vm1 = new Vue({
el : "#app1",
data : {
dataStr : new Date()
},
methods : {}
});
var vm2 = new Vue({
el : "#app2",
data : {
dataStr : new Date()
},
methods : {}
});
</script>
</body>
這裡定義了兩個Vue對象分別綁定id為div1和div2的元素，在這兩個元素作用域里使用了全局過濾器formatData，運行的效果是一樣的，這就是全局過濾器。但是有的時候我們想定義一個專屬於某個Vue對象的過濾器，不允許別的對象訪問，這個時候我們就需要定義私有過濾器。
2、私有過濾器
<body>
<div id="app1">
app1的時間格式化：{{dataStr | formatData}}
</div>
<div id="app2">
app2的時間格式化：{{dataStr | formatData}}
</div>
<script type="text/javascript">
var vm1 = new Vue({
el : "#app1",
data : {
dataStr : new Date()
},
methods : {},
filters:{
formatData:function(dataStr){
var newDate = new Date();
var y = newDate.getFullYear();
var m = newDate.getMonth() + 1;
var d = newDate.getDate();
var hh = newDate.getHours();
var mm = newDate.getMinutes();
var ss = newDate.getSeconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
});
var vm2 = new Vue({
el : "#app2",
data : {
dataStr : new Date()
},
methods : {}
});
</script>
</body>
私有過濾器的定義需要放在Vue對象里，屬性名為：filters，其值為對象，對象內容為方法，其中方法名為私有過濾器的名稱，方法參數是需要處理的數據，返回值為處理之後的展示值，也可以同時定義多個私有過濾器。
運行結果如下：
id為app1的時間被格式化成功，app2的沒有被格式化，說明私有化的過濾器不允許被其他Vue對象調用。
每天進步一點點！
