Vue中的过滤器

过滤器：就是让要显示在页面上的内容进行重新筛选。
格式：分为两种：一种是全局过滤去，一种是局部过滤器
全局过滤器格式：

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>

多加练习，不荒废现在的时间，对得起未来的自己！