过滤器
对数据进行进一步处理
eg:Tue Feb 23 2021 20:48:46 GMT+0800 (中国标准时间)
调用格式
{{ name | nameope }}
//该filter需放在前面
Vue.filter('过滤器的成称',function(){
})
基本使用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{msg | msgOut }}</h1>
</div>
<script type="text/javascript">
//第一个参数:过滤器管道符前面传递过来的数据
Vue.filter('msgOut',function(data){
return data+" World";
})
var vm = new Vue({
el: "#app",
data:{
msg:"Hello"
},
methods:{
}
})
</script>
</body>
</html>
格式化时间的全局过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{time | dataFormat }}</h1>
</div>
<script type="text/javascript">
//第一个参数,永远都是过滤器管道符前面传递过来的数据
Vue.filter('dataFormat',function(data){
//根据时间字符串,得到时间
var dt = new Date(data);
// 变化格式 :yyyy-mm-dd
var y = dt.getFullYear();
var m = dt.getMonth();
var d = dt.getDate();
return `${y}-${m}-${d}`; //`yyyy-mm-dd`
})
var vm = new Vue({
el: "#app",
data:{
time:new Date()
},
methods:{
}
})
</script>
</body>
</html>
自定义私有过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>{{msg | msgOut }}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg:"Hello"
},
//定义私有过滤器
filters:{
msgOut:function(data){
return data+" World";
}
}
})
</script>
</body>
</html>
注:
过滤器调用,会采用就近原则。
即若私有过滤器和全局过滤器名称一致时,将优先采用私有过滤器