vue过滤器起步_vue-admin 调用过滤器-优快云博客

本文链接：https://blog.youkuaiyun.com/admin_djp/article/details/111935862

本文围绕Vue过滤器展开，介绍了过滤器的概念，即对数据进行处理的工具，如修改字符串、转换时间戳等。详细说明了创建过滤器的方法，包括全局和组件（局部）过滤器，以及使用时的注意事项。还阐述了过滤器在双花括号插值和v - bind表达式中的使用方式，并给出了传递不同参数的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、创建过滤器
二、过滤器使用
三、实例

前言

过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如把‘Hello改成成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；或者把时间戳改为我们想要的时期等都可以使用过滤器。

一、创建过滤器

定义过滤器

全局过滤器

Vue.filter('过滤器名称', function (value) {  
 //逻辑代码
})

组件过滤器（局部过滤器）

const app = new Vue({ 
 ...      
 filters: {      
    '过滤器名称': function (value) { 
       // 逻辑代码     
      } 
     }    
　　})

注意：在全局注册过滤器时是filter。而组件(局部)过滤器是filters，比全局多了个s，虽然你写的时候没有s不报错，但是过滤器是没有效果的

二、过滤器使用

双花括号插值

<!-- 在双花括号中 -->
<div>{{数据属性名称 | 过滤器名称}}</div>
<div>{{数据属性名称 | 过滤器名称(参数值)}}</div>

v-bind表达式
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示

<!-- 在 `v-bind` 中 -->
<div v-bind:id="数据属性名称 | 过滤器名称"></div>
<div v-bind:id="数据属性名称 | 过滤器名称(参数值)"></div>

三、实例

传递一个参数的全局过滤器

 <div id="app">
        <span>{{msg|my-filter}}</span>
 </div>
 <script>
        Vue.filter('my-filter', function(value) {
            return value.toUpperCase();//HELLO

        })
        const app = new Vue({
            el: "#app",
            data: {
                msg: "hello"
            }
        })
    </script>

传递多个参数的局部过滤器

<div id="app">
    <!--过滤器接收多个参数-->
    <span>{{value1|myfilter(value2,value3)}}</span>
</div
<script>

  var vm = new Vue(
    {
      el: '#app',
      data: {
        msg: 'hello',
        value1:10,
        value2:20,
        value3:30
      },
    //局部过滤器
      filters: {
        myfilter(value1, value2, value3) {
          return value1*value2*value3
        }
      }

    }
  )

</script>