美文网首页Vue
04-Vue中的过滤器

04-Vue中的过滤器

作者: 乔乔_老师 | 来源:发表于2018-08-30 10:46 被阅读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>
    

    相关文章

      网友评论

        本文标题:04-Vue中的过滤器

        本文链接:https://www.haomeiwen.com/subject/xecrwftx.html