Vue学习之过滤器的使用

全栈程序员-站长 • 2022年4月23日上午6:40 • 未分类 • 阅读 63

Vue学习之过滤器的使用Vue学习之过滤器的使用

大家好，又见面了，我是你们的朋友全栈君。

过滤器

概念：
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示(” | “)；

分类：过滤器分为全局过滤器和局部过滤器(私有过滤器)

全局过滤器

我们先通过案例来介绍下过滤器的使用，然后再看下何为全局过滤器
过滤器的语法

// 声明过滤器
Vue.filter("过滤器名称","回调函数")

1.简单过滤器的使用

我们先来看下过滤器的简单使用，如下是没有使用过滤器的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <p>{
  
  {msg}}</p>
    </div>
    <script>
        
        var vm = new Vue({
            el: "#app",
            data: {
                msg:"今日NBA,保罗换威少,哈哈...NBA新闻真多，大家一起关注NBA..."
            },
            methods: {
                
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

添加一个过滤器来将msg中的”NBA”,替换为 “美国篮球联盟”

在这里插入图片描述

在这里插入图片描述

我们发现这时候只有一个关键字被替换了，其他两个没变，这时候我们可以通过正则表达式来处理

在这里插入图片描述

在这里插入图片描述

这时我们看到实现了我们需要的效果了

2.过滤器传参数

在通过管道符号来使用过滤器的时候我们还可以传递参数过去，如下

在这里插入图片描述

在这里插入图片描述

传值效果实现了。

3.多个过滤器同时使用

我们对一个信息处理的时候，可以同时使用多个管道符来调用多个过滤器来处理，如下

在这里插入图片描述

页面效果

在这里插入图片描述

4.何为全局过滤器

接下来我们看看什么是全局过滤器，其实我们上面定义的过滤器就是全局过滤器，我们在页面中再增加一个div和一个Vue对象，

在这里插入图片描述

在这里插入图片描述

然后我们在第二个div中使用我们前面定义的过滤器来看看

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

通过以上效果我们也能看出来什么是全局的过滤器了，其实就是我们定义的过滤器可以被本页面中的多个Vue对象所使用

局部过滤器

相对于全局过滤器来说，局部过滤器就是只能够定义这个过滤器的Vue对象可以使用，具体步骤如下:

在这里插入图片描述

使用局部过滤器和前面是一样的

在这里插入图片描述

在这里插入图片描述

通过页面效果我们发现在vm对象中定义的过滤器在vm2中绑定的div中是不可以使用的，只能在定义的Vue对象绑定的div中使用，这就是局部变量。
注意：如果全局过滤器和局部过滤器同名的情况话，会通过就近原则调用局部过滤器！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/106498.html原文链接：https://javaforall.net

赞 (0)

全栈程序员-站长

0 0

什么是mdc_mdc网站

什么是mdc_mdc网站MDC中包含的可以被同一线程中执行的代码所访问内容。当前线程的子线程会继承其父线程中的MDC的内容。记录日志时，只需要从MDC中获取所需的信息即可。简单来说就是日志的增强功能，如果配置了MDC，并添加了相应的keyvalue，就会在打日志的时候把key对应的value打印出来。内部是用ThreadLocal来实现的，可以携带当前线程的context信息。转载于…

全栈程序员-站长
2022年10月28日
idea

IntelliJ IDEA Community Edition 社区版插件汇总「建议收藏」

IntelliJ IDEA Community Edition 社区版插件汇总「建议收藏」一、前言今年Idea对盗版软件打击力度加大，朋友们会发现，旗舰版自己激活使用，过几天就会失效，需要重新激活，有的小伙伴就会选择去淘宝花钱买个教育邮箱注册，这个方法我使用过，过了两三个月就不能用了，着实让人头疼。如何解决呢？我想到了Idea社区版本，下载一个使用，将我的Springboot项目导入，启动下试试，不出所料，报错了。好啦！步入正题。社区版Idea相比旗舰版少了很多功能，包括Java开发最重要的Web开发能力！Spring项目没有Tomcat插件，不能在Idea启动。SpringBoot

全栈程序员-站长
2022年9月15日
Android应用程序注冊广播接收器（registerReceiver）的过程分析

Android应用程序注冊广播接收器（registerReceiver）的过程分析

全栈程序员-站长
2021年12月14日
python类的初始化方法_python初始化列表

python类的初始化方法_python初始化列表【背景】在scikit-learn基础上系统结合数学和编程的角度学习了机器学习后(我的github:https://github.com/wwcom614/machine-learning)，意犹未尽，打算再借势学习下深度学习TensorFlow。无奈安装之后遇到了这个问题，耽误了几个小时才得以解决。我发现这是个很多人开始TensorFlow之旅普遍遇到的问题，而且是很多人尝试了网上很多方法都未解…

全栈程序员-站长
2022年8月30日
100TB大数据存储方案

100TB大数据存储方案HiveHbase存储介质：https://www.zhihu.com/question/46392643?sort=created请问，在家里攒一套100TB-200TB的存储有什么架构方案可以借鉴的？预算10万以内，性价比越高越好带宽和吞吐量不是很重要，USB3.0/千兆LAN单出口都可以接受，软raid硬raid都行可以是机柜形式，有单间机房耗电无所谓…

全栈程序员-站长
2022年10月6日
SCSA考试大纲[通俗易懂]

SCSA考试大纲[通俗易懂]认证考试形式和结构一、试卷满分及时间试卷满分为120分，考试时间为80分钟，80分通过二、考试形式在线考试三、答题方式闭卷四、试卷内容知识结构试题比例网络基础15%信息安全基础5%数据传输安全15%上网行为安全30%边界安全20%…

全栈程序员-站长
2022年6月20日

发表回复

关注全栈程序员社区公众号