全局過濾器和局部過濾器的使用以及區(qū)別 2018-11-20
1.定義過濾器的條件：過濾器名稱和處理函數(shù)
2.全局過濾器可以讓所有vm實(shí)例共享；局部過濾器只針對指定的vm實(shí)例
3.當(dāng)全局過濾器和局部過濾器的參數(shù)名字相同的時(shí)候纠脾，采用就近原則撬码，優(yōu)先調(diào)用局部過濾器
4.全局過濾器使用Vue.filter() 局部過濾器使用filters:{}
5.過濾器可以傳遞參數(shù)
6.過濾器可以傳遞多個(gè)參數(shù)
7.過濾器可以被多次調(diào)用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="big_box">
<h1>{{dt | dateFormat()}}</h1>
</div>
<div id="box">
<h1>{{dt | dateFormat()}}</h1>
</div>
</body>
<script type="text/javascript">
//定義了一個(gè)全局過濾器
Vue.filter('dateFormat', function(dateStr, pattern) {
var dt = new Date(dateStr)
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
if(pattern && pattern.toLowerCase() == 'yyyy-mm-dd') {
return `${y}-${m}-$nfgm0xk`
} else {
return `${y}-${m}-$tvakqgx ${hh}:${mm}:${ss}---全局`
}
})
//實(shí)例化一個(gè)vue
var vms = new Vue({
el: '#big_box',
data: {
dt: new Date()
}
})
//實(shí)例化一個(gè)vue
var vm = new Vue({
el: '#box',
data: {
dt: new Date()
},
filters: { //定義一個(gè)局部過濾器
dateFormat: function(dateStr, pattern) {
var dt = new Date(dateStr)
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
if(pattern && pattern.toLowerCase() == 'yyyy-mm-dd') {
return `${y}-${m}-$nopafvr`
} else {
return `${y}-${m}-$fuaxmct ${hh}:${mm}:${ss}---局部`
}
}
}
})
</script>
</html>
