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笔记目录

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java闲聊

SpringBoot+Vue2.x登陆功能

2984
来自专栏DeveWork

WordPress 中禁止某个用户在线编辑主题

对于多作者的WordPress 站点,如果需要对WordPress 主题编辑权限做不同的限制,而非如之前分享的文章那样所以用户都限制都禁止,那么需要通过自定义函...

1836
来自专栏码生

实现更安全、高扩展的自定义键盘 非UIButton

自定义键盘的封装网上的例子比比皆是,有的封装的非常完美,直接pod 集成到项目中便可以简单的使用,可是为什么我还要自定义一个呢? 一不是不是为了显摆,二不是网...

1162
来自专栏云计算教程系列

优化SEO?提升你的PageSpeed评分吧!

Nginx在处理网页请求时速度非常快,但是默认的Nginx配置也会导致PageSpeed评分降低。Google会将您网站的速度作为确定网站SEO位置的关键因素。

2278
来自专栏技术博客

ExtJs十三(ExtJs Mvc图片管理之三)

现在要完成目录的编辑操作。因为目录的编辑只是改变目录名称,因而使用Cellediting插件就可完成工作。要完成这个不难,首先在目录树的定义中加入以下语句隐藏列...

1153
来自专栏王二麻子IT技术交流园地

十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题。今天我们来重新调...

28910
来自专栏应兆康的专栏

Vim教程

Vim文本编辑器使用 先上官方的图吧,然后解释    (来自: www.viemu.com)附上中文版 ? ? Vim分为3种模式:  命令模式(Command...

3138
来自专栏技术博客

ExtJs十一(ExtJs Mvc图片管理之一)

图片管理要在两个地方使用:一是标签页内的图片管理,一是文章内容编辑时嵌套到插入图片的窗口内。因而,将图片管理做成一个扩展比较方便。当然,做成MVC模式也行,不争...

1363
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(13)——上传文件

3796
来自专栏前端儿

前端代码乱糟糟?是时候引入代码质量检查工具了

为了统一团队的代码规范,除了一纸规范说明之外,还需要引入工具进行限制。虽说工具并不能完全实现规范中的规则,但至少能够在一定程度上缓解代码不统一的局面。

3081

扫码关注云+社区

领取腾讯云代金券