过滤器(filter)

最新推荐文章于 2023-12-07 08:14:40 发布

侠客博园

最新推荐文章于 2023-12-07 08:14:40 发布

阅读量126

点赞数

文章标签： Vue 过滤器全局过滤器局部过滤器自定义逻辑

本文链接：https://blog.csdn.net/wen15191038073/article/details/120547523

版权

过滤器

在vue中过滤器使用 filter来表示；
在不改变原始数据的情况下格式化（按照我们的需要）展示内容
过滤器本应该分为自定义过滤器和内置过滤器*** 但是在vue2.x之后取消了**内置过滤器*** 内置过滤器只停留在1.x之中

自定义过滤器：

1.自定义过滤器又分为全局与局部过滤器：
使用过滤器：
语法：
{{变量| 过滤器的名字 }}
例如：源码走起🤷‍♂️：

<div id="demodiv">
     <h1>{{num|xiaoming}}</h1>

    </div>
    <div id="demodivb">
       <h1>{{num|xiaoming}}</h1>

    </div>

局部(filters)：只能在局部内部使用;
语法：(写在指定实例的el methods watch 等同级位置使用 filters来进行定义);
filters:{
过滤器的名字(你要过滤器的名字){
(必须写)return 你过滤的逻辑
}
}
例如：源码走起😜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demoDiv1">
        <h1>{{text}}</h1>
    </div>
    <div id="demoDiv2">
        <h1>{{num|xixi}}</h1>
    </div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        data:{
            text:'2017-03-12 22:48:56'
        },
        el:'#demoDiv1',
        methods:{

        },
        somputed:{

        }
    })
    new Vue({
        data:{
            num:"2017-03-14 13:30:39"
        },
        el:'#demoDiv2',
        methods:{

        },
        somputed:{

        },
        filters:{
            xixi(data){
                return data.substr(0,10)
            }
        }
    })
</script>

全局(filter)：全局就是一个内容可以在任何区域都可以使用；
语法：(定义在vue实例之前)
vue.filter(‘当前过滤器的名字’,(你要过滤的数据)=>{
return 你要过滤的数据
}）
例如：源码走起🤞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demoDiv1">
        <h1>{{text1|xixi}}</h1>
    </div>
    <div id="demoDiv2">
        <h1>{{text2|xixi}}</h1>
    </div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
        Vue.filter('xixi',(data)=>{
            return data.substr(0,10)
        })
    new Vue({
        data:{
            text1:'2017-03-12 22:48:56'
        },
        el:'#demoDiv1',
        methods:{

        },
        somputed:{

        }
    })
    new Vue({
        data:{
            text2:'2017-03-14 13:30:39'
        },
        el:'#demoDiv2',
        methods:{

        },
        somputed:{

        }
    })
</script>

***如果码农们有哪些不理解私聊，可以相互探讨一下***🤞😜

侠客博园

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过滤器(filter)

过滤器在vue中过滤器使用 filter来表示；在不改变原始数据的情况下格式化（按照我们的需要）展示内容过滤器本应该分为自定义过滤器和内置过滤器*** 但是在vue2.x之后取消了**内置过滤器*** 内置过滤器只停留在1.x之中自定义过滤器：1.自定义过滤器又分为全局与局部过滤器：使用过滤器：语法：{{变量| 过滤器的名字 }}例如：源码走起????‍♂️：<div id="demodiv"> <h1>{{num|xiaoming}}&lt
复制链接

扫一扫