<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<script src
="../js/vue-2.4.0 .js"></script
>
<title
>过滤器
</title
>
</head
>
<body
>
<!-- 两个过滤器的名称都为msgFormat，但是控制不同作用，一个是全局的，一个是局部的
-->
<!-- 如果全局和局部过滤器名称一样，优先调用局部过滤器
-->
<!-- 全局过滤器示例
-->
<div id
="map">
<h4
>{{ msg
| msgFormat('疯狂', '123') | test
}}</h4
>
<h3
>{{ msg
| msgFormat('张三', '李四')}}</h3
>
</div
>
<!-- 局部过滤器示例
-->
<div id
="map2">
<h4
>{{ dt
| msgFormat
}}</h4
>
</div
>
<script
>
Vue
.filter('msgFormat', function (msg
, arg
, arg2
){
return msg
.replace(/中国/g, arg
+ arg2
)
});
Vue
.filter('test', function (msg
) {
return msg
+ '========='
})
var vm
= new Vue({
el
: '#map',
data
: {
msg
: '中国人爱中国',
},
methods
: {},
})
var vm2
= new Vue({
el
: '#map2',
data
: { dt
: new Date() },
methods
: {},
filters
: {
msgFormat
:function(dateStr
, pattern
=''){
var dt
= new Date(dateStr
)
var y
= dt
.getFullYear().toString().padStart(2, '0')
var m
= (dt
.getMonth() + 1).toString().padStart(2, '0')
var d
= dt
.getDate().toString().padStart(2, '0')
if (pattern
.toLowerCase() === 'yyy-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}`
}
}
}
})
</script
>
</body
>
</html
>
