Vue过滤器

切图仔

发布于 2022-09-08 15:40:41

3810

发布于 2022-09-08 15:40:41

文章被收录于专栏：生如夏花绚烂

过滤器

过滤器主要用在插值表达式（{{ }}）或v-bind中，在数据即将渲染时进行一些操作，如时间格式化。

全局过滤器

全局过滤器作用与所有VM对象定义格式

Vue.filter(name,function(data,arg[]){
...
})

name:string :过滤器名称 data:过滤器管道符前面的数据 arg[]:可选自定义其他参数

使用方法 {{ data | 过滤器 }}

示例--全局过滤器时间格式化

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="app">
        <P>过滤前：{{ date }}</P>
        <p>过滤后：{{ date | dateFormdat }}</p>
    </div>
    <script type="text/javascript" src='./vue.js'></script>
    <script type="text/javascript">
        //定义全局过滤器
        Vue.filter('dateFormdat',function(data){
            var newDate = new Date(data)
            var yy = newDate.getFullYear()
            var mm = newDate.getMonth()+1
            var dd = newDate.getDate()
            return `${yy}-${mm}-${dd}`
        })
        var vm = new Vue({
            el:"#app",
            data:{
                date:new Date()
            }
        })
    </script>
</body>
</html>

实现效果

带参数的过滤器

过滤器也可以传入参数如下示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="app">
        <P>过滤前：{{ date }}</P>

        <p>传参前：{{date | dateFormdat}}</p>
        <p>传参后：{{ date | dateFormdat("yyyy-mm-dd h:i:s") }}</p>
    </div>
    <script type="text/javascript" src='./vue.js'></script>
    <script type="text/javascript">
        //定义全局过滤器
        Vue.filter('dateFormdat',function(data,arg){
            var newDate = new Date(data)
            var yy = newDate.getFullYear()
            var mm = (newDate.getMonth()+1).toString().padStart(2,0)
            var dd = newDate.getDate().toString().padStart(2,0)
            
            if(arg && arg==="yyyy-mm-dd h:i:s"){
                var h = newDate.getHours();
                var m = newDate.getMinutes()
                var s = newDate.getSeconds()
                return `${yy}-${mm}-${dd} ${h}:${m}:${s}`
            }
            return `${yy}-${mm}-${dd}`
        })
        var vm = new Vue({
            el:"#app",
            data:{
                date:new Date()
            }
        })
    </script>
</body>
</html>

私有过滤器

私有过滤器作用与当前VM对象定义格式

filters:{
   （过滤器名称）
    dateFomdat:function(){
            //
        }
}

示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="app">
        <P>过滤前：{{ date }}</P>

        <p>传参前：{{date | dateFormdat}}</p>
        <p>传参后：{{ date | dateFormdat("yyyy-mm-dd h:i:s") }}</p>
    </div>
    <div id="app2">
        <p>传参后：{{ date | dateFormdat("yyyy-mm-dd h:i:s") }}</p>
    </div>
    <script type="text/javascript" src='./vue.js'></script>
    <script type="text/javascript">
        //定义全局过滤器
        Vue.filter('dateFormdat',function(data,arg){
            var newDate = new Date(data)
            var yy = newDate.getFullYear()
            var mm = (newDate.getMonth()+1).toString().padStart(2,0)
            var dd = newDate.getDate().toString().padStart(2,0)
            
            if(arg && arg==="yyyy-mm-dd h:i:s"){
                var h = newDate.getHours();
                var m = newDate.getMinutes()
                var s = newDate.getSeconds()
                return `${yy}-${mm}-${dd} ${h}:${m}:${s}`
            }
            return `${yy}-${mm}-${dd}`
        })
        var vm = new Vue({
            el:"#app",
            data:{
                date:new Date()
            }
        })

        var vm2 = new Vue({
            el:"#app2",
            data:{
                date:new Date()
            },
            filters:{
                dateFormdat:function(data){
                    var newDate = new Date(data)
                    var yy = newDate.getFullYear()
                    var mm = (newDate.getMonth()+1).toString().padStart(2,0)
                    var dd = newDate.getDate().toString().padStart(2,0)
                    return `私有过滤器${yy}-${mm}-${dd}`
                }
            }
        })
    </script>
</body>
</html>