Vue - 02 过滤器

Vue支持在{{}}插值的尾部添加管道符（“|”）对数据进行过滤，经常用于格式化文本，创建过滤器有两种方式，即全局创建过滤器和局部创建过滤器。

1.全局创建

语法：

Vue.filter("过滤器名",function(val){
        过滤语句
})

2.局部创建

语法：

    var v = new Vue({
        el: "#app",
        filters: {
            过滤器名: function (val) {
                过滤语句
            }
        }
    })

 

在html中的语法如下：

    <div id="app">
        {{模型数据|过滤器}}
    </div>

 

使用过滤器格式化日期与时间，效果：

<!DOCTYPE html>
<html>
    <head>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>
            时间过滤器
        </title>
        <style>
        </style>
    </head>
    
    <body>
       <div id="Mbox" style="background-color: black;width: 500px;height: 100px;text-align: center;line-height: 100px;margin: auto;">
           <h3 style="color:white;">
                当前时间是：{{a|formatDate}}
           </h3>
       </div>
    </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
        var dateAdd=function(val){
            return val<10?'0'+val:val;
        };
    var app=new Vue({
        el:"#Mbox",
        data:{
            
            a:""
        },
        created:function(){
            this.a=new Date();
        },
        mounted:function(){
            var t=this;
            this.time=setInterval(function(){
                t.a=new Date();
            },1000)
        },
        beforeDestroy:function(){
            if (this.time) {
                clearInterval(this.time);
                console.log(this.a);
            }
        },

        filters:{
            formatDate:function(val){
                var times=new Date(val);
                var nian=times.getFullYear();
                var yue =dateAdd(times.getMonth());
                var ri =dateAdd(times.getDay());
                var shi=dateAdd(times.getHours());
                var fen=dateAdd(times.getMinutes());
                var miao=dateAdd(times.getSeconds());
                return nian+"-"+yue+"-"+ri+" "+shi+":"+fen+":"+miao;
            }

        }
        
    });

</script>
实例实现代码

 

posted @ 2020-08-26 22:07  猹岛  阅读(137)  评论(0)    收藏  举报