vue内JS代码中使用filter方案总结

木屋x

已于 2022-08-24 18:22:25 修改

阅读量894

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript vue.js

于 2022-02-15 14:58:05 首次发布

本文链接：https://blog.csdn.net/qq_34917408/article/details/122944814

vue 专栏收录该内容

20 篇文章

订阅专栏

本文总结了在Vue项目中如何使用filter，包括全局定义filter、在模板中使用以及在JavaScript代码中调用filter的两种方法，详细展示了如何在不同场景下应用过滤器来处理数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                    
                    vue内JS代码中使用filter方案总结
1.需求背景
最近在vue项目中使用到了filter，常见的情况是在vue模版中使用，也有一些情况是在JS代码中使用，下面对其进行总结：

解决方案

// 1.全局新增一个filter（Vue单独引入），如：
Vue.filter('dictionary', function(value, code) {
    if (code) {
       return localStorage.get('DICT_DATA')[code];
    }
    return ''
})

// 2.在模版中使用：
<span>{{value|dictionary('documents_type')}}</span>

// 3.在JS中使用，方法1：
this.$options.filters['dictionary'](value,'documents_type')

// 4.在JS中使用，方法2：
Vue.filter('dictionary')(value,'documents_type')