过滤器
过滤器主要用在插值表达式（{{ }}）或v-bind中，在数据即将渲染时进行一些操作，如时间格式化。
全局过滤器
全局过滤器作用与所有VM对象 定义格式
代码语言：javascript复制Vue.filter(name,function(data,arg[]){
...
})name:string :过滤器名称 data:过滤器管道符前面的数据 arg[]:可选自定义其他参数
使用方法 {{ data | 过滤器 }}
示例--全局过滤器时间格式化
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<P>过滤前：{{ date }}</P>
<p>过滤后：{{ date | dateFormdat }}</p>
</div>
<script type="text/javascript" src='./vue.js'></script>
<script type="text/javascript">
//定义全局过滤器
Vue.filter('dateFormdat',function(data){
var newDate = new Date(data)
var yy = newDate.getFullYear()
var mm = newDate.getMonth() 1
var dd = newDate.getDate()
return `${yy}-${mm}-${dd}`
})
var vm = new Vue({
el:"#app",
data:{
date:new Date()
}
})
</script>
</body>
</html>实现效果
带参数的过滤器
过滤器也可以传入参数 如下示例
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<P>过滤前：{{ date }}</P>
<p>传参前：{{date | dateFormdat}}</p>
<p>传参后：{{ date | dateFormdat("yyyy-mm-dd h:i:s") }}</p>
</div>
<script type="text/javascript" src='./vue.js'></script>
<script type="text/javascript">
//定义全局过滤器
Vue.filter('dateFormdat',function(data,arg){
var newDate = new Date(data)
var yy = newDate.getFullYear()
var mm = (newDate.getMonth() 1).toString().padStart(2,0)
var dd = newDate.getDate().toString().padStart(2,0)
if(arg && arg==="yyyy-mm-dd h:i:s"){
var h = newDate.getHours();
var m = newDate.getMinutes()
var s = newDate.getSeconds()
return `${yy}-${mm}-${dd} ${h}:${m}:${s}`
}
return `${yy}-${mm}-${dd}`
})
var vm = new Vue({
el:"#app",
data:{
date:new Date()
}
})
</script>
</body>
</html>
私有过滤器
私有过滤器作用与当前VM对象 定义格式
代码语言：javascript复制filters:{
（过滤器名称）
dateFomdat:function(){
//
}
}示例
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<P>过滤前：{{ date }}</P>
<p>传参前：{{date | dateFormdat}}</p>
<p>传参后：{{ date | dateFormdat("yyyy-mm-dd h:i:s") }}</p>
</div>
<div id="app2">
<p>传参后：{{ date | dateFormdat("yyyy-mm-dd h:i:s") }}</p>
</div>
<script type="text/javascript" src='./vue.js'></script>
<script type="text/javascript">
//定义全局过滤器
Vue.filter('dateFormdat',function(data,arg){
var newDate = new Date(data)
var yy = newDate.getFullYear()
var mm = (newDate.getMonth() 1).toString().padStart(2,0)
var dd = newDate.getDate().toString().padStart(2,0)
if(arg && arg==="yyyy-mm-dd h:i:s"){
var h = newDate.getHours();
var m = newDate.getMinutes()
var s = newDate.getSeconds()
return `${yy}-${mm}-${dd} ${h}:${m}:${s}`
}
return `${yy}-${mm}-${dd}`
})
var vm = new Vue({
el:"#app",
data:{
date:new Date()
}
})
var vm2 = new Vue({
el:"#app2",
data:{
date:new Date()
},
filters:{
dateFormdat:function(data){
var newDate = new Date(data)
var yy = newDate.getFullYear()
var mm = (newDate.getMonth() 1).toString().padStart(2,0)
var dd = newDate.getDate().toString().padStart(2,0)
return `私有过滤器${yy}-${mm}-${dd}`
}
}
})
</script>
</body>
</html>
