1.全局指令
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
window.onload=function(){
//全局指令
Vue.filter("addZero",function(num){
return num<10?"0"+num:num;
})
new Vue({
el:"#root",
data:{
curTime:'1597899549'
},
})
}
</script>
</head>
<body>
<div id="root">
<div>{{10|addZero}}</div>
</div>
</body>
</html>
2.局部指令
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:"#root",
data:{
curTime:'1597899549'
},
//局部指令
filters:{
number:function(num,n){
return num.toFixed(n);
},
date:function(data){
let d= new Date(data*1000);
return d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDay();
}
}
})
}
</script>
</head>
<body>
<div id="root">
<div>{{3.1415926|number(3)}}</div>
<div>{{curTime|date}}</div>
</div>
</body>
</html>
注意:
- 当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!
- 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右