Vue自定义域过滤器和管道符

一、过滤器的分类与语法格式

1、本地过滤器（局部过滤器）：

var vm = new Vue({
	filters:{}
})

例一：实现一个对首字母大写的过滤器

<!-- 过滤器可以使用于{{}}文本插值和v-bind指令中 -->
<div id="filter">
	<h4>例1：实现一个对数据首字母大写的过滤器</h4>
	<p>{{name | capitalize}}</p>
	<a href="" :title="title | zhifou">知否知否，应是绿肥红瘦</a>
</div>

var filter = new Vue({
	el:'#filter',
	data:{
		name:'zanilia',
		message:'family',
		title:'知否'
	},
	filters:{
		capitalize:value=>{
			//value 将来使用过滤器的数据的取值
			return value.charAt(0).toUpperCase() + value.slice(1);
		},
		zhifou:value=>{
			return value + "--赵丽颖"
		}
	}
})

2、全局过滤器

定义在所有Vue实例以外的过滤器被称为“全局过滤器”。

例二、实现所有字母大写

<div id="filter">
	<h4>例2：实现所有字母大写</h4>
	<p>{{message | upper}}</p>
</div>

Vue.filter('upper',value=>{
	return value.toUpperCase()
})

二、带参数的过滤器

例3：制作一个名为readMore的过滤器，将指定字符个数以外的文本利用省略符实现

<div id="filter2">
	<h4>例3：制作一个名为readMore的过滤器，将指定字符个数以外的文本利用省略符实现</h4>
	<p>{{sheng | readMore('132','...')}}</p>
</div>

var filter2 = new Vue({
	el:'#filter2',
	data:{
		sheng:'盛明兰出生于江南官宦人家，身为家中最不受宠爱的女儿，自幼所处父亲不重视，姐妹欺压难缠的困境，不仅生存艰难，深宅之中更处处深藏意想不到的危机所幸明兰知命却不受命运摆弄，在万般打压之下依然自强自立，一路小心谨慎洞察世事，凭借自己的聪慧隐忍与祖母的栽培点拨，从在家中备受冷落欺凌，到成为影响着家族兴荣的举足轻重的人物，一路完成从闺阁少女到侯门主母的前进励志人生之路。'
	},
	filters:{
		readMore:function(text,length,char){
			/*text作为第一个参数，永远表示需要过滤的数据*/
			return text.slice(0,length) + char;
		}
	}
})

三、过滤器的串联

例4：对数据保留两位小数并添加货币符号

<div id="number">
	<h4>例4：对数据保留两位小数并添加货币符号(过滤器的串联)</h4>
	{{price | sumA(2) | sumB('￥')}}
</div>

var number = new Vue({
	el:'#number',
	data:{
		price:156.2349
	},
	filters:{
		sumA:function(price,n){
			/*toFixed(n):将数值转换为定点实数的形式的字符串，且保留n位小数并四舍五入。*/
			return price.toFixed(n)
		},
		sumB:function(price,char){
			return char + price
		}
	}
})