Vue学习之过滤器的使用

旧城等待， 2021-11-29 04:46 373阅读 0赞

# 过滤器 #

概念：  
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>

![在这里插入图片描述][20190712203152830.png]

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

![在这里插入图片描述][20190712203938910.gif]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

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

![在这里插入图片描述][20190712204134601.gif]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]

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

### 2.过滤器传参数 ###

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

![在这里插入图片描述][20190712204358746.gif]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]

传值效果实现了。

### 3.多个过滤器同时使用 ###

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

![在这里插入图片描述][2019071220463687.gif]

页面效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]

### 4.何为全局过滤器 ###

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

![在这里插入图片描述][20190712204908624.gif]

![在这里插入图片描述][20190712205012112.gif]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]

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

## 局部过滤器 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 7]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 8]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 9]

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

[20190712203152830.png]: /images/20211129/4525e03b74f148118bb5ba5bfad30f52.png
[20190712203938910.gif]: /images/20211129/ab5f2d97b82b4ec09e8b571eeda899c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20211129/46e2fdcdbab54982aff99c77124271c3.png
[20190712204134601.gif]: /images/20211129/9424f209ef2f4cca863695e16a25c47f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20211129/4a095864dcfb4dd2a73a500cc230d44c.png
[20190712204358746.gif]: /images/20211129/6df53df5bb624300870f2bd28dc10814.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: /images/20211129/511a91dc4af64cebbc647ea25eb41047.png
[2019071220463687.gif]: /images/20211129/448eb901b6b14218a7d51570661fb455.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: /images/20211129/5c1f461c0dfc42c882c0439ba3effc33.png
[20190712204908624.gif]: /images/20211129/87b8c6d653c74d9ab905b9c093563228.png
[20190712205012112.gif]: /images/20211129/58d8f0d6c2c34b8ca1b12b8b8dbd89b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]: /images/20211129/7daa346e92dc4787a9797487a7a1ffc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]: /images/20211129/83e5eab4051d44fcb2e4da781ae422d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]: /images/20211129/b95b2aa57f094350a6c4ff2a5e10ffd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 7]: /images/20211129/3e2f103bed5a4e4f9f87d09916f94aaa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 8]: /images/20211129/66eb8779732844b089e8cc1daeecf09b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 9]: /images/20211129/231f4726c8f74b2d9e9b695ba6fa23fa.png