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

python信号处理库_python开源协议

python信号处理库_python开源协议本发明涉及的是一种在用电采集终端上实现标准MBUS协议接口用来采集水表、热量表、气表数据的方法，具体涉及一种基于MBUS标准协议接口模块采集水、热、气表的方法，属于用电信息采集领域。背景技术：我国正处于自动化楼宇建设事业蓬勃发展的时期，远程抄表系统作为其中重要的一环，正朝着自动化及智能化方向发展；MBUS(仪表总线)总线作为一种通讯方式，以其高性价比，在水热测量仪表中得到了广泛的应用，大大推动了远…

全栈程序员-站长
2022年10月15日
分布式事务中的Saga模式「建议收藏」

分布式事务中的Saga模式「建议收藏」微服务架构（MSA）已经变得非常流行。但是，一个常见问题是如何跨多个微服务管理分布式事务。当微服务架构将单体系统分解为自封装服务时，意味着单体系统中的本地事务现在分布到将按顺序调用的多个服务中。说到分布式事务，通常熟悉的是两阶段提交，TCC等常见模式。初次之外还有基于Saga实现的分布式事务。什么是Saga？Saga事务模型又叫做长时间运行的事务（Long-running-transact…

全栈程序员-站长
2022年9月18日
网页添加背景音乐

网页添加背景音乐为网页添加背景音乐的方法一般有两种，第一种是通过普通的标签来添加，另一种是通过标签来添加。（一）使用标签用Dreamweaver打开需要添加背景音乐的页面，点击“代码”打开代码编辑视图，在之间输入“Dreamweaver自动输入“空格键，代码提示框会自动将bgsound标签的属性列出来供你选择使用。bgsound标签共有五个属性，其中balance是设置音乐的左右均衡，delay是

全栈程序员-站长
2022年9月24日
LightGBM源码阅读+理论分析（处理特征类别，缺省值的实现细节）[通俗易懂]

LightGBM源码阅读+理论分析（处理特征类别，缺省值的实现细节）[通俗易懂]前言关于LightGBM，网上已经介绍的很多了，笔者也零零散散的看了一些，有些写的真的很好，但是最终总觉的还是不够清晰，一些细节还是懵懵懂懂，大多数只是将原论文翻译了一下，可是某些技术具体是怎么做的呢？即落实到代码是怎么做的呢？网上资料基本没有，所以总有一种似懂非懂的感觉，貌似懂了LightGBM，但是又很陌生，很不踏实，所以本篇的最大区别或者优势是：源码分析，看看其到底怎么实现的，同时会将源…

全栈程序员-站长
2022年11月2日
我的世界区块显示_我的世界怎么显示区块线

我的世界区块显示_我的世界怎么显示区块线我的世界手游区块是一个独特的机制，很多玩家对于区块是什么不太了解，区块显示指令以及区块的产生不是很熟悉，为了帮助到大家，今天小编就为大家带来我的世界手游区块显示指令分享：区块玩法操作详解的内容，希望大家能够喜欢，下面就让我们一起来看看吧！区块相关1.出生点区块在出生点附近的区块是一块围绕世界出生点的区域中的一个区块，只要有玩家在主世界，它就不会被从内存中卸载。这意味着像红石元件和刷怪会继续，甚至所…

全栈程序员-站长
2022年9月17日
高等数学解题神器app_ubuntu cp命令

高等数学解题神器app_ubuntu cp命令XSS在chrome上，需要先关闭xss保护反射型low对输入未做过滤$data=no_check($data);输入<script>alert(document.cookie)</script>middle输入校验functionxss_check_4($data){//addsla…

全栈程序员-站长
2022年9月23日

发表回复

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