Vue学习之路第十八篇：私有过滤器的使用
程序员文章站
2022-04-09 18:17:52
1、上篇已经介绍了全局过滤器的使用，“全局”顾名思义就是一次定义处处使用，可以被一个页面里不同的Vue对象所使用，如下代码所示： 这里定义了两个Vue对象分别绑定id为div1和div2的元素，在这两个元素作用域里使用了全局过滤器formatData，运行的效果是一样的，这就是全局过滤器。但是有的时 ......
1、上篇已经介绍了全局过滤器的使用，“全局”顾名思义就是一次定义处处使用，可以被一个页面里不同的vue对象所使用，如下代码所示：
<body>
<div id="app1">
app1的时间格式化：{{datastr | formatdata}}
</div>
<div id="app2">
app2的时间格式化：{{datastr | formatdata}}
</div>
<script type="text/javascript">
vue.filter('formatdata',function(datastr){
var newdate = new date();
var y = newdate.getfullyear();
var m = newdate.getmonth() + 1;
var d = newdate.getdate();
var hh = newdate.gethours();
var mm = newdate.getminutes();
var ss = newdate.getseconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
});
var vm1 = new vue({
el : "#app1",
data : {
datastr : new date()
},
methods : {}
});
var vm2 = new vue({
el : "#app2",
data : {
datastr : new date()
},
methods : {}
});
</script>
</body>
这里定义了两个vue对象分别绑定id为div1和div2的元素，在这两个元素作用域里使用了全局过滤器formatdata，运行的效果是一样的，这就是全局过滤器。但是有的时候我们想定义一个专属于某个vue对象的过滤器，不允许别的对象访问，这个时候我们就需要定义私有过滤器。
2、私有过滤器
<body>
<div id="app1">
app1的时间格式化：{{datastr | formatdata}}
</div>
<div id="app2">
app2的时间格式化：{{datastr | formatdata}}
</div>
<script type="text/javascript">
var vm1 = new vue({
el : "#app1",
data : {
datastr : new date()
},
methods : {},
filters:{
formatdata:function(datastr){
var newdate = new date();
var y = newdate.getfullyear();
var m = newdate.getmonth() + 1;
var d = newdate.getdate();
var hh = newdate.gethours();
var mm = newdate.getminutes();
var ss = newdate.getseconds();
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
}
}
});
var vm2 = new vue({
el : "#app2",
data : {
datastr : new date()
},
methods : {}
});
</script>
</body>
私有过滤器的定义需要放在vue对象里，属性名为：filters，其值为对象，对象内容为方法，其中方法名为私有过滤器的名称，方法参数是需要处理的数据，返回值为处理之后的展示值，也可以同时定义多个私有过滤器。
运行结果如下：
id为app1的时间被格式化成功，app2的没有被格式化，说明私有化的过滤器不允许被其他vue对象调用。
每天进步一点点！