vue filter过滤器

过滤器

	方式一:局部过滤器
		1、与data同级
			filters:{
				xx:function(value)
				{
					return  value+x
				}
			}

			其中:value为|前面的值

		2、在要过滤的文本后面
			{{"str"/数值| xx}}
			<div v-bind:id="rawId | xx"></div>
		
		3、串联过滤器
			{{ message | filterA | filterB }}
		
		4、过滤器接收参数
			过滤器是JavaScript函数,因此可以接收参数:
			{{ message | filterA(arg1, arg2) }}	message为第一个参数,arg1和arg2作为第二和第三个参数
			
	方式二:
		1、全局过滤器
			import Vue from 'vue'
			
			Vue.filter('xx',function(value){
			  return xxx;
			})
		
		2、使用
			{{"str"/数值| xx}}

代码示例:

<template>
	
	<div>
		{{"hh 20" | fil}}
		{{"这个"| str}}
	</div>
</template>
<script>
export default{
	name:'d',
	data()
	{
		return{

		}
	},
	filters:{
		fil:function(value)
		{
			if(!value)
			{
				return;
			}
			value=value.toString()
			return "$"+value	
		},
		str:function(value)
		{
			if(!value)
			{
				return;
			}
			return value+'jeff'	
		}
	}

}
</script>
<style lang="css">
</style>