全局过滤器和局部过滤器的使用以及区别 2018-11-20
1.定义过滤器的条件：过滤器名称和处理函数
2.全局过滤器可以让所有vm实例共享；局部过滤器只针对指定的vm实例
3.当全局过滤器和局部过滤器的参数名字相同的时候，采用就近原则，优先调用局部过滤器
4.全局过滤器使用Vue.filter() 局部过滤器使用filters:{}
5.过滤器可以传递参数
6.过滤器可以传递多个参数
7.过滤器可以被多次调用
<!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">
//定义了一个全局过滤器
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}-${d}`
} else {
return `${y}-${m}-${d} ${hh}:${mm}:${ss}---全局`
}
})
//实例化一个vue
var vms = new Vue({
el: '#big_box',
data: {
dt: new Date()
}
})
//实例化一个vue
var vm = new Vue({
el: '#box',
data: {
dt: new Date()
},
filters: { //定义一个局部过滤器
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}-${d}`
} else {
return `${y}-${m}-${d} ${hh}:${mm}:${ss}---局部`
}
}
}
})
</script>
</html>
网友评论