一、过滤器的分类与语法格式
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
}
}
})