vue过滤器filter的使用

最新推荐文章于 2025-03-09 20:24:50 发布

Hello_MrShu

最新推荐文章于 2025-03-09 20:24:50 发布

阅读量7.8k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Hello_MrShu/article/details/127363940

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vue.js中的过滤器，包括全局和局部过滤器的创建，如何在模板中使用过滤器，以及如何串联多个过滤器和传递参数。过滤器可用于文本格式化，例如转换大小写或根据条件显示不同内容。同时，文章还讨论了过滤器中`this`的指向问题及其解决方案。

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

vue允许自定义过滤器，我们通常用于对文本进行格式化一类的操作。如：将返回值 'abc' 设置为 'ABC' 显示在页面中；又或者，如果返回值为 'a' 页面显示 '张三'，返回值为 'b' 页面显示 '李四'。总之，对当前文本的各种操作，几乎都可以用filter来解决。

注意：过滤器仅可以在两个地方使用：1、花括号中；2、v-bind中；

// 在花括号中使用
<div>{{ message | msgFilter }}</div>

// 在v-bind中使用
<div v-bind:id="rawId | idFilter"></div>

一、全局过滤器

vue项目中创建全局过滤器：在main.js中注册全局过滤器，且必须放在vue实例创建之前。然后才可以在各个组件中使用。

//main.js

Vue.filter('filter1',function(value){
    return value.chartAt(0).toUpperCase()+value.slice(1)
})

new Vue({
    //.......
})

二、局部过滤器

局部过滤器，在组件中定义，与data，created，methods等同级。

filters：{
    filter1：function(value){
        return value.chartAt(0).toUpperCase()+value.slice(1)
    }
}

三、多个过滤器串联

我们在应用中，可以依次使用两个或多个过滤器，每个过滤器的参数为上一次过滤器返回的结果。

<div> {{ message | filter1 | filter2 }} </div>

在以上例子中，有两个过滤器 filter1 和 filter2。首先会将 message 传入 filter1 中进行第一次处理，然后再将 filter1 的处理结果，传递到 filter2 中进行第二次处理，最终，将filter2的处理结果渲染到页面中。

四、过滤器添加参数

过滤器同样是一个js函数，因此可以添加参数。

<div> {{ message | filter1('param1','param2') }} </div>

如上所示，filter1 有一个默认参数 message ，我们自定义添加了两个参数 'param1' 和 'param2'，此时，在实际的过滤器函数中一共接收到三个参数：message，'param1'，'param2'；

filters：{
    filter1：function(value,value1,value2){
        console.log(value)   // message变量的值
        console.log(value1)  // param1
        console.log(value2)  // param2
    }
}

五、过滤器 this 指向问题

filter过滤器中的this指向，并不是vue中的this，而是undefined；

因此，如果我们想要获取data中的数据，有两种方法：1、改变this指向；2、传参；

1、改变this 指向

<template>
  <div class="file-bg"> {{ fileObj | typeFilter}} </div>
</template>
<script>
  let that;
  export default {
    data(){
	  return{
		fileObj:{type:'file'},
        classObj:{file:'file-img'}
      }
    },
    beforeCreate(){
      that = this;
    },
    filters:{
	  typeFilter:function(obj){
        console.log(that.classObj)
      }
    }
  }
</script>

2、传参

<template>
  <div class="file-bg"> {{ fileObj | typeFilter(classObj) }} </div>
</template>

<script>
  export default {
    data(){
	  return{
		fileObj:{type:'file'},
        classObj:{file:'file-img'}
      }
    },
    filters:{
	  typeFilter:function(obj,classObj){
        console.log(obj)
        console.log(classObj)
      }
    }
  }
</script>