vue中过滤器的使用（多个过滤器的同时使用）

前一阵在做一个微信扫码的功能，客户想不单单通过扫码更新业务状态，还想通过点击按钮的方式直接更新业务的状态，其实功能方面并不难实现，只是展示这里我稍加思索，因为每个用户根据岗位的不同，并根据每条信息案卷状态的不同，在按钮中展示的文本并不一样，在这里我是通过filters实现的。既然点击的文本不同，那点击前后按钮的颜色和状态也应一并变化
！！！实现目标：更改按钮文本、更改按钮状态、更改按钮颜色

其实实现这三个功能的逻辑判断都是一样的，明确下用户在可以点击按钮的情况下按钮的颜色应该是蓝色、状态是可点击的、文本是确认接收，不可以点击的情况下，按钮是白色、状态是不可点击的、文本是已更新，明白上述实现思路，话不多说直接上代码：

视图层（这里我就直接展示按钮的代码）：

<van-button :type="item | getColor" 
		   class="button_info" size="small" 
			@click="confirmUpTz(item)" 
			:disabled="item | getdisabled">{{item | getzsxx}}
</van-button>

按钮我使用的是vant的button组件，通过改变type的取值来更改按钮颜色的变换，按钮是否可以点击取决与disabled的取值为true还是false，文本则通过{{ }}中的过滤器

切记：过滤器是写在filters中，与data，methods同级：

按钮的颜色

getColor(item){
		let zw = localStorage.getItem('myjobtitle');
		if(zw == '生产单位'){
			return 'default'
		}else if(zw == '出图室'){
			if((item.dqzt == '0.5' && item.dqjd == '出图室') || Number(item.dqzt) >= 1 ){
				return 'default'
			}else{
				return 'info'
			}
		}else if(zw == '计划科'){
			if((item.dqzt == '0.5' && item.dqjd == '计划科') || Number(item.dqzt) >= 1 ){
				return 'default'
			}else{
				return 'info'
			}
		}else if(zw == '资料室'){
			if(Number(item.dqzt) >= 2){
				return 'default'
			}else{
				return 'info'
			}
		}else if(zw == '经营部大厅'){
			if(Number(item.dqzt) == 3){
				return 'info'
			}else if(Number(item.dqzt) >3){
				return 'default'
			}else{
				return 'info'
			}
		}else if(zw == '甲方'){
			if(Number(item.dqzt) >= 4){
				return 'default'
			}else{
				return 'info'
			}
		}
	}

按钮的状态

getdisabled(item){
		let zw = localStorage.getItem('myjobtitle');
		if(zw == '生产单位'){
			return true
		}else if(zw == '出图室'){
			if((item.dqzt == '0.5' && item.dqjd == '出图室') || Number(item.dqzt) >= 1 ){
				return true
			}else{
				return false
			}
		}else if(zw == '计划科'){
			if((item.dqzt == '0.5' && item.dqjd == '计划科') || Number(item.dqzt) >= 1 ){
				return true
			}else{
				return false
			}
		}else if(zw == '资料室'){
			if(Number(item.dqzt) >= 2){
				return true
			}else{
				return false
			}
		}else if(zw == '经营部大厅'){
			if(Number(item.dqzt) == 3){
				return false
			}else if(Number(item.dqzt) >3){
				return true
			}else{
				return false
			}
		}else if(zw == '甲方'){
			if(Number(item.dqzt) >= 4){
				return true
			}else{
				return false
			}
		}
	},

按钮的文本

getzsxx(item){
	let zw = localStorage.getItem('myjobtitle');
	if(zw == '生产单位'){
		return '已更新'
	}else if(zw == '出图室'){
		if((item.dqzt == '0.5' && item.dqjd == '出图室') || Number(item.dqzt) >= 1 ){
			return '已更新'
		}else{
			return '确认接收'
		}
	}else if(zw == '计划科'){
		if((item.dqzt == '0.5' && item.dqjd == '计划科') || Number(item.dqzt) >= 1 ){
			return '已更新'
		}else{
			return '确认接收'
		}
	}else if(zw == '资料室'){
		if(Number(item.dqzt) >= 2){
			return '已更新'
		}else{
			return '确认接收'
		}
	}else if(zw == '经营部大厅'){
		if(Number(item.dqzt) == 3){
			return '为甲方代领'
		}else if(Number(item.dqzt) >3){
			return '已完成'
		}else{
			return '确认接收'
		}
	}else if(zw == '甲方'){
		if(Number(item.dqzt) >= 4){
			return '已完成'
		}else{
			return '确认接收'
		}
	}
}

前台最终展示效果

其实这三个过滤器的逻辑是一样的，只是return的返回值不一样，我目前想到的使用filter的实现方式是这一种，各位大佬们如果有更好的实现思路，欢迎在下方评论去留言，大家一起学习一同进步。