首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue过滤器filter使用

vue过滤器filter的使用方法详解

2023-09-17 11:44:54 作者：Hello_MrShu

这篇文章主要给大家介绍了关于vue过滤器filter的使用方法,Vue.js的过滤器(Filter)是一种可重用的功能,用于对文本进行格式化,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

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>

总结

到此这篇关于vue过滤器filter的使用方法的文章就介绍到这了,更多相关vue过滤器filter使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！