vue.js过滤器的基本使用

过滤器分为两种:

  • 全局过滤器

  • 自定义过滤器

使用过滤器,我们可以对数据进行格式化处理

过滤器

具体代码

代码解析:

全局过滤器

Vue.filter('formatMsg', function (msg, arg) {
   return msg.replace(/青春/g, arg);
});
Vue.filter('formatAgain', function (msg, arg) {
    return msg + ",然而我还是很想念她";
});

自定义过滤器

let vm = new Vue({
    el: "#app",
    data: {
        msg: '我的生涯一片无悔,我想起那天夕阳下的奔跑,那是我逝去的青春'
    },
    filters: {
        // 定义私有的过滤器
        test: function (msg) {
            return msg + ", 青涩美好又有些疼痛的青春";
        }
    }
})

注意:

  • 过滤器可以多层引用,多个过滤器用管道符 | 隔开

  • 当全局过滤器与自定义过滤器同名时,优先使用自定义过滤器

如想了解更多的vue实例,请查阅我的vue笔记目录

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    一缕清风1144阅读 4,897评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,269评论 19 139
  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    嘉宝_Appian阅读 1,206评论 1 4
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,032评论 3 119
  • 我知道,你不爱我。可是偏偏,我们在一起了,这一在就是快两年的时间。因为我确实是在我十八岁那年喜欢上了你,看来那句你...
    蓝色小花阅读 408评论 0 0