04-Vue中的过滤器
2018-08-30 本文已影响0人
乔乔_老师
一、过滤器
定义：用来过滤数据模型，在显示之前进行数据处理和筛选
自定义过滤器
全局过滤器
vue.filter(过滤器ID,过滤器函数)
局部过滤器
1.全局过滤器
想要实现的效果:如果是一位数，要在个位补零，变成两位数，如果是两位数，就要原样输出
<body>
<div id='itany'>
<p>{{8 | addZero}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
Vue.filter('addZero',function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
})
new Vue({
el:'#itany'
})
</script>
</body>
2.实现一个保留两位小数的过滤器
<body>
<div id='itany'>
<p>{{123.456 | number}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
// Vue.filter('number',function(data){
// return data.toFixed(2);
// })
new Vue({
el:'#itany',
filters:{//局部过滤器
number:function(data){
return data.toFixed(2);
}
}
})
</script>
</body>
3.实现一个输出日期的过滤器
<body>
<div id='itany'>
<p>{{123456789 | date}}</p>
</div>
<script src='js/vue.js'></script>
<script type="text/javascript">
Vue.filter('date',function(data){
let D=new Date(data);
return D.getFullYear()+'-'+D.getMonth()+1+'-'+D.getDate();
})
new Vue({
el:'#itany'
})
</script>
</body>
