Vue过滤器的几种用法

川长思鸟来 2021-07-27 02:28 427阅读 0赞

# Vue过滤器的几种用法 #

###### 本文主要介绍Vue项目中filter的几种用法。 ######

### 一. 单独在组件或者是页面中使用 ###

单独在页面或者是组件中使用vue filter比较简单,主要是用在\{ \{ \}\} 和v-bind指令中。  
简单的代码示例如下：

<view v-bind:value = "val|getVal">{
       {val|getVal}}</view>

/* 在vue实例中添加filter */
    filters:{ 
    	getVal(val){           // val 即是表达式 { {val|getVal}} 中的变量val
    		return val+"abc"  // 这里返回想要的格式 
    	}
    }

### 二.全局注册filter ###

在vue项目或者是Uni-APP下全局注册vue filter 只需在main.js 中进行全局filter 声明。

Vue.filter('filterName', function (value) { 
      return value.toUpperCase();
    })

上述方法每新增一个过滤器就需要在`main.js`中进行全局注册，使用起来不是很方便。最好是将所有的过滤器放到一个独立的js文件中。比如新建一个文件夹filters，新建一个`filters.js`文件。将所有的过滤器都放置在该文件下，并通过exports导出。像下面这样：

此时在`main.js`中引入`filters.js`文件，对该文件下的所有过滤器统一注册，这样以后新增过滤器时只需要将过滤器添加在`filters.js`中，无需每次都去main.js中注册。同时也方便过滤器的统一管理和修改。

/* main.js中全局注册过滤器 */
    import { filters} from '@/common/filters/filters.js';
    Object.keys(filters).forEach(item => Vue.filter(item,filters[item]));

### 三. filter可传递自定义参数 ###

例如

<view>{ { val1|getVal(10,12)}}</view>

filters:{ 
    	getVal(val1,val2,val3){      // val1 即是表达式 { {val1|getVal(10,12)}}中的变量val1,val2=10,val3 =12
    		return val1+val2+val3  // 这里返回想要的格式 
    	}
    }