如果公司还在用Vue2--那么我们需要了解过滤器的用法

Try Tomato

已于 2022-04-26 08:16:08 修改

阅读量1.5k

点赞数 2

分类专栏： + Vue 2 文章标签：前端 javascript vue.js vue 过滤器

于 2022-04-25 22:38:18 首次发布

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124415345

版权

+ Vue 2 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

Vue2中有过滤器（Filters）这样一个函数，不过在Vue3中被取消掉了

现在市面上还是有很多的公司都在使用Vue2的，所以过滤器我们有必要去了解一下：

它常用于文本的格式化（可以在插值表达式{{}}或者v-bind属性绑定中使用）

我们简单的了解了一下过滤器，那么怎么使用呢？

私有过滤器

全局过滤器

私有过滤器

<div id="app">
    <p :id="val | call">{{val | call}}</p>
    <!--最终的结果是这个过滤器的返回值-->
    <!-- | 就是管道符-->
    <!-- | 过滤器应该被添加到JavaScript表达式的尾部，由管道符来进行调用-->
</div>

const vm = new Vue({
    el:'#app',
    data:{
        val:"hello Vue"
    },
    //使用filters节点对象来存放过滤器
    filters:{
        call(val){
            const first= val.charAt(0).toUpperCase()
            const other = val.slice(1)
            //这里的return是必须要有的，过滤器中必须有一个返回值
            return first + other
        }
    }
})

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARGV2ZWxvcGVy5bCP6JyX,size_20,color_FFFFFF,t_70,g_se,x_16

全局过滤器

我们在Vue实例中的filters节点下定义的过滤器是私有过滤器，因为它只能在当前Vue实例对象所控制的el区域内使用

如果我们想要去实现一个过滤器的复用，就是在多个Vue实例中共享一个过滤器，我们可以调用Vue构造函数的.filter方法来创建一个全局的过滤器：

Vue.filter('call',(val)=> {
    return val.charAt(0).toUpperCase() + val.slice(1)
})

单引号里的参数为全局过滤器名称，也就是我们书写在插值表达式中管道符后面的那个function函数；

接下来第二个参数是一个全局过滤器的处理函数，处理函数中的参数为需要进行过滤处理的数据

<body>
    <div id="app">
        <p :id="val | call">{{val | call}}</p>
    </div>

    <div id="app2">
        <p :id="val | call">{{val | call}}</p>
    </div>
</body>
<script src="../vue.js"></script>
<script>
Vue.filter('call',(val)=> {
    return val.charAt(0).toUpperCase() + val.slice(1)
})
const vm = new Vue({
    el:'#app',
    data:{
        val:"hello Vue"
    }
})

const vm2 = new Vue({
    el:'#app2',
    data:{
        val:"hello Vue"
    }
})
</script>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBARGV2ZWxvcGVy5bCP6JyX,size_20,color_FFFFFF,t_70,g_se,x_16

tips：如果全局过滤器和私有过滤器的名字冲突的话，会优先调用私有的过滤器，遵循就近原则

过滤器还有串联和传参这俩个用法：

多个传参：

<div id="app">
    <p>{{val | call(test1,test2)}}</p>
</div>

Vue.filter('call',(val,test1,test2)=> {
    return val.charAt(0).toUpperCase() + val.slice(1)
})

串联用法：

<div id="app">
    <p>{{val | call | call2 | call3 | call4}}</p>
</div>

从左向右依次执行（val数据给到call处理-->处理返回值给到call2-->......call4返回值输出）

Try Tomato

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
如果公司还在用Vue2--那么我们需要了解过滤器的用法

Vue2中有过滤器（Filters）这样一个函数，不过在Vue3中被取消掉了现在市面上还是有很多的公司都在使用Vue2的，所以过滤器我们有必要去了解一下：它常用于文本的格式化（可以在插值表达式{{}}或者v-bind属性绑定中使用）我们简单的了解了一下过滤器，那么怎么使用呢？目录私有过滤器全局过滤器私有过滤器<div id="app"> <p :id="val | call">{{val | call}}</p> &.
复制链接

扫一扫