Vue中的过滤器
2018-09-17 本文已影响0人
Cherish丶任
过滤器：就是让要显示在页面上的内容进行重新筛选。
格式：分为两种：一种是全局过滤去，一种是局部过滤器
全局过滤器格式：
js中: Vue.filter('过滤器名字'，function(){})
html中：<p>{{msg|过滤器名字}}</p>
过滤器的名字可以自定义，无特殊要求,但要保持一致
局部过滤器格式：
new Vue({
el:'#itany',
filters:{
过滤器名：function(参数){
}
}
})
eg：全局过滤器
<div id="#itany">
<p>{{2|name}}</p><!---让数字以两位数出现，10以下前面加0--->
</div>
<script src="../js/vue.js"></script>
<script>
Vue.filter(‘name’,function(data){
if(data<10){
return '0'+data
}else{
return data
}
})
new Vue({
el:'#itany'
})
</script>
eg：局部过滤器
<div id="#itany">
<p>{{100.569|name}}</p><!---让小数点后保留两位小数--->
</div>
<script src="../js/vue.js"></script>
<script>
//全局过滤器
/*Vue.filter('name',function(data){
return data.toFixed(2)
})*/
new Vue({
el:'#itany',
//局部过滤器
filters:{
name:function(data){
return data.toFixed(2)
}
}
})
</script>
练习
要求：输出年月日时分秒
Image 1.png
代码如下：
<div id="itany">
{{mas|name}}
</div>
<script src="../js/vue.js"></script>
<script>
//全局
Vue.filter('name',function(date){
return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+'日，星期'+date.getDay()+'，'+date.getHours()+'时'+date.getMinutes()+'分'+date.getSeconds()+'秒'
})
new Vue({
el:'#itany',
data:{
mas:new Date()
},
//局部
/*filters:{
name:function(date){
//年
var year=date.getFullYear()
//月 从0开始
var mon=date.getMonth()+1
//日
var tian=date.getDate()
//星期
var day=date.getDay()
//小时
var hour=date.getHours()
//分钟
var min=date.getMinutes()
//秒
var miao=date.getSeconds()
return year+'年'+mon+'月'+tian+'日，星期'+day+','+hour+'时'+min+'分'+miao+'秒'
}
}
*/
})
</script>
