7-vue中的过滤器

vue中过滤器的主要作用是对data数据中心的数据进行处理。

vue中的过滤器分为两种：局部过滤器和全局过滤器。

局部过滤器----filters 选项 / 资源

	filters:{
		
	},

全局过滤器----全局 API

Vue.filter()

我们可以用methods方法中心的 对 data数据中心的数据 进行处理，并将 处理后的数据进行返回输出

方法：

	methods:{
		// 我们可以用methods方法中心的 对 data数据中心的数据 进行处理
		parseTime(){
			let array = this.time.split('-');
			return `${array[0]}年${array[1]}月${array[2]}日`
		}
	}

在视图层调用方法：

<div id="app">
	{{time}}
	<div>{{parseTime()}}</div>
</div>

预览效果如下所示：

我们可以在vue实例中，自定义局部过滤器，对data数据中心数据进行处理

	filters:{
		filterTime(time){
			let array = time.split('-');
			return `${array[0]}年${array[1]}月${array[2]}日`
		}
	},

在视图层

{{time|filterTime}}

把time作为参数，放进filtertTime函数中

在视图层调用方法：

<div id="app">
	{{time}}
	<div>{{time | filterTime}}</div>
</div>

预览效果如下所示：

过滤器可以写 过滤器链

{{time | filterTime | filterTime2}}

把第一个过滤器的放置filterTime  作为第二个过滤器的参数 放进filterTime2函数中

在vue实例中，再定义一个过滤器，js如下所示：

	filters:{
		filterTime(time){
			let array = time.split('-');
			return `${array[0]}年${array[1]}月${array[2]}日`
		},
		filterTime2(str){
			return str + 'hello'
		}
	},

{{time | filterTime | filterTime2}}

把第一个过滤器filterTime 的返回值  作为第二个过滤器的参数 放进filterTime2函数中

在视图层，

<div>{{time | filterTime | filterTime2}}</div>

预览效果，如下所示：

全局过滤器

注意：

定义多个vue实例，每个vue实例中数据中心data中的数据，不能在其他实例的视图层中使用

vuejs：

<script type="text/javascript">
	// 定义多个vue实例，每个vue实例中数据中心data中的数据，不能在其他实例的视图层中使用
	new Vue({
		el:'#app1',
		data:{
			i:0
		}
	})
	
	new Vue({
		el:'#app2',
		data:{
			
		}
	})
	
	new Vue({
		el:'#app3',
		data:{
			msg:'hello'
		}
	})
</script>

html:

<div id="app1">
	{{i}}
</div>
<div id="app2">
	{{i}}
</div>
<div id="app3">
	{{i}}
</div>

其他vue实例的视图层使用i变量，报bug。

预览效果如下所示：

如果我们定义 全局过滤器，就可以在多个vue实例中去使用

vuejs：

	// 自定义全局过滤器
	// 字符串转大写
	Vue.filter('parseString', function(str){
		return str.toUpperCase()
	})
	new Vue({
		el:'#app2',
		data:{
			title:'this is my life'
		}
	})
	
	new Vue({
		el:'#app3',
		data:{
			msg:'hello'
		}
	})

vue实例2和vue实例3中均可以使用 全局过滤parseString，去处理 自己的数据。

视图层：

<div id="app2">
	{{title | parseString}}
</div>
<div id="app3">
	{{msg | parseString}}
</div>

预览效果如下所示：