Vue.js初学—过滤器

最新推荐文章于 2022-12-19 11:03:53 发布

Dove_Y

最新推荐文章于 2022-12-19 11:03:53 发布

阅读量139

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_41470439/article/details/109098841

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文探讨了Vue.js中的过滤器使用，特别是全局过滤器和局部过滤器的调用优先级。当全局与局部过滤器同名时，根据就近原则，会优先执行局部过滤器。在一个具体的案例中，展示了如何定义并应用这两个过滤器，最终输出结果为'S'，这体现了局部过滤器的优先级高于全局过滤器。

摘要由CSDN通过智能技术生成

对即将显示的数据做进一步的筛选处理然后显示。

分为全局过滤器和局部过滤器。

当全局过滤器与局部过滤器名字相同时，按照就近原则，优先调用局部过滤器。局部过滤器的优先级大于全局过滤器。

下面案例显示结果为S（就近原则）。

<script src="./script/vue.js"></script>

<div id="app">
        <span>{{msg|capitalize}}</span>
</div>

<script>
//     toUppercase 是把字符串中的小写字母转换成大写字母。 
//     charAt 是返回指定索引位置的字符。
//     substring 是返回一个新的字符。
    Vue.filter('capitalize', function(value){
        if(!value) return ""
        value = value.toString()
        return value.charAt(0).toUpperCase().substring()
    })
    new Vue({
        el:'#app',
        data:{
            msg:'wsdf'
        },
        filters:{
            'capitalize':function(value){
                if(!value) return ""
                value = value.toString()
                return value.charAt(1).toUpperCase().substring()
            }
        }
    })
</script>