Vue学习之过滤器的使用

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中使用,这就是局部变量。
注意:如果全局过滤器和局部过滤器同名的情况话,会通过就近原则调用局部过滤器!

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106498.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 菜鸟实战UML——活动图

    菜鸟实战UML——活动图活动图活动图(activitydiagram)是阐明了业务用例实现的工作流程。业务工作流程说明了业务为向所服务的业务主角提供其所需要的价值而必须完成的工作,业务用例由一系列活动组成,他们共同为业务主角生成某些工件。工作流程通常包括一个基本的工作流程和一个或多个备选工作流程。工作流程的结构使用活动图来进行说明。用途活动图是UML用于对系统的动态行为建模的另一种常用工具,它描述活动的顺序,展现…

  • MySQL锁详解

    MySQL锁详解根据加锁的范围,MySQL里面的锁大致可以分成全局锁、表级锁和行锁三类一、全局锁全局锁就是对整个数据库实例加锁。MySQL提供了一个加全局读锁的方法,命令是Flushtableswithreadlock。当需要让整个库处于只读状态的时候,可以使用这个命令,之后其他线程的以下语句会被阻塞:数据更新语句(数据的增删改)、数据定义语句(包括建表、修改表结构等)和更新类事务的提交语句全局锁的…

  • 全网最全Python学习路线图+14张思维导图,让python初学者不走弯路![通俗易懂]

    全网最全Python学习路线图+14张思维导图,让python初学者不走弯路![通俗易懂]        最近忙着做大数据的项目,故有一段时间没更新Python专栏的内容了。        突发奇想,想把当初自学python时收藏的关于python的14张思维导图和学习路线拿出来分享给许多同样处于”初级”阶段的各位攻城狮们。…

  • ssm整合shiro框架的使用,实现权限管理「建议收藏」

    ssm整合shiro框架的使用,实现权限管理「建议收藏」ssm整合shiro框架,对用户的登录操作进行认证和授权,目的很纯粹就是为了增加系统的安全线,至少不要输在门槛上嘛。ssm整合shiro安全框架的步骤:1、引入shiro安全框架的所需jar包&lt;!–shiro–&gt;&lt;dependency&gt;&lt;groupId&gt;org.apache.shiro&lt;/groupI…

  • jetbrains全家桶激活码 淘宝上卖的怎么来的【2021最新】

    (jetbrains全家桶激活码 淘宝上卖的怎么来的)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • 用Python读取CSV文件的5种方式

    用Python读取CSV文件的5种方式典型的数据集stocks.csv:一个股票的数据集,其实就是常见的表格数据。有股票代码,价格,日期,时间,价格变动和成交量。这个数据集其实就是一个表格数据,有自己的头部和身体。第一招:简单的读取我们先来看一种简单读取方法,先用csv.reader()函数读取文件的句柄f生成一个csv的句柄,其实就是一个迭代器,我们看一下这个reader的源码:喂给reader一个可迭代对象或者是文件的object,然后返回一个可迭代对象。首先读取csv文件,然后用csv.reader生成一个csv迭代器

发表回复

您的电子邮箱地址不会被公开。

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