vue过滤器filters

在vue中有个类似实例组件中computed的资源选项，那便是过滤器filters，为什么说类似呢，因为他们都可以对已有的数据进行加工再返回加工后的数据，但是两者又有着明显的区别，下面先阐述什么是vue过滤器

1.用途：常在v-bind与{{}}里使用

2.本质：是声明的函数，最终返回结果

3.声明：可在实组件例局部声明也可在全局声明

 使用方法如下

声明过滤器

<template>
	<div>
		<input v-model="name">
		<!-- 属性 | 过滤器 -->
		{{name | upName}}
	</div>
</template>

<script>
	export default {
		name: 'Test',

		data() {
			return {
				name: ''
			}
		},

		//申明过滤器
		filters: {
			upName(val) {
				if (!val) return '';
				return val.toUpperCase();
			}
		}
	}
</script>

如上所示，过滤器的声明与computed十分类似，在filters中可以声明若干个过滤器，但是与computed不同的是其与数据解耦，不会依赖实例中$data中的数据，这个很容易理解，自己稍微思考一下就明白了

使用规则在花括号中{{属性 | 过滤器 | 过滤器 | ...}}，你没有看错，这里可以使用若干个过滤器串联起来，并且是顺序关系，即按照顺序执行，后一个过滤器以前一个过滤器返回结果作为参数，第一个过滤器以绑定属性作为参数

此外由于过滤器是函数性质，因此可以传参，即默认参数之外可以额外指定参数

<template>
	<div>
		<input v-model="name">
		<!-- 属性 | 过滤器 -->
		<p>{{name | upName('20','mouse')}}</p>
	</div>
</template>

<script>
	export default {
		name: 'Test',

		data() {
			return {
				name: 'q'
			}
		},

		//申明过滤器
		filters: {
			upName(name,age,nick) {
				return `name is:${name},age is:${age},nick is:${nick}`;
			}
		}
	}
</script>

效果如下所示 

 

 

 同样可以定义全局过滤器

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.filter('test',(val) => {
	if(!val) return '';
	return val.toUpperCase();
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

使用时直接在组件实例中使用即可