Vue过滤器的几种用法

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导出。像下面这样：

const filters={
	getZYLevel : (val)=>{
		switch (val){
			case 1: return '一级';break;
			case 2: return '二级';break;
			case 3: return '三级';break;
			default: return '';break;
		}
	},
	getZYType : (val)=>{
		switch (val){
			case 1: return '风';break;
			case 2: return '火';break;
			case 3: return '山';break;
			case 4: return '林';break;
			default: return '';break;
		}
	},
	getApproveResult : (val) => {
		switch (val){
			case 0: return '待审核';break;
			case 1: return '同意';break;
			case 2: return '退回';break;
			case 3: return '否决';break;
			default: return '待审核';break;
		}
	}
}

export  {filters}

此时在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>

<!-- val1默认是第一个参数，后续添加的10,12为第二个参数，第三个参数 -->

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