龙空技术网

Vue中如何通过过滤器来实现丰富的页面效果?

波哥带你学Java 679

前言:

此时我们对“js的filter怎么用”大体比较关怀,我们都需要分析一些“js的filter怎么用”的相关文章。那么小编在网摘上网罗了一些有关“js的filter怎么用””的相关资讯,希望兄弟们能喜欢,各位老铁们一起来学习一下吧!

  本文我们来介绍下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中使用,这就是局部变量。

注意:如果全局过滤器和局部过滤器同名的情况话,会通过就近原则调用局部过滤器!

标签: #js的filter怎么用