1-6 基本用法-过滤器
目录：
- 简介
- 内置过滤器
- 自定义过滤器(全局过滤器和局部过滤器)
一、简介
用来过滤模型数据，在显示之前进行数据处理和筛选
语法：
{{data | filter1(参数) | fileter2(参数)}}
二、内置过滤器
在vue1.0中内置过滤器，如：
currecy、uppercase、lowercase limitBy、orderBy、filterBy...
在Vue2.0中已经删除了所有内置过滤器，全部被废除。Vue1.0迁移至Vue2.0解决内置过滤器的办法：
- 使用第三方工具库，如：loadash(下划线库，每个过滤器都是以下划线开头)、data-fn日期格式化、accounting.js货币格式化
- 使用自定义过滤器
三、自定义过滤器
3.1、过滤器分类
- 全局过滤器：所有的Vue实例中都可以用
- 局部过滤器：只有在当前实例中使用
3.2、自定义全局过滤器
使用全局方法：Vue.filter 定义全局过滤器，语法如下：
#Vue.filter(id,[definition]) => Vue.filter(过滤器ID,过滤器函数)
//注册成全局过滤器
Vue.filter('my-filter',function(value){
//返回处理值
})
简写：
Vue.filter('my-filter',value => {
//返回处理值
})
//getter,返回已注册的过滤器
var myfilter = Vue.filter('my-filter')
实例：
<body>
<div id="box">
<h3>{{8 | addZero}}</h3> <!--调用过滤器addZero-->
<h3>{{12.345678 | number(3)}}</h3>
<h3>{{currentTime | date}}</h3>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
/***
*定义全局过滤器
*/
Vue.filter('addZero',function(data)=> {
return data<10?'0' + data:data; //表达式语法： 判断条件? v1:v2，满足条件输出v1，不满足输出v2
});
Vue.filter("number",(data,n) => { //(data,n) => {} 相当于 function(data,n){}
//(data，n) => 第1个值data表示你需要操作的值，后面的参数表示你为这个过滤器传递参数，可能还有n多个参数
return data.toFixed(n);
});
Vue.filter('date',data => { //data => {} 相当于 function(data){}
let d = new Date(data);
return d.getFullYear()+'-'+d.getMonth()+'-'+d.getDate();
});
//定义Vue实例
new Vue({
el: "#box",
data:{
currentTime:Date.now()
}
});
</script>
</body>
知识点整理：
过滤器函数简写：
//传入单个参数
Vue.filter('过滤器ID',function(data){}) 简写：Vue.filter('过滤器ID',data => {})
//传入多个参数
Vue.filter('过滤器ID',function(data,n){}) 简写： Vue.filter('过滤器ID',(data,n) => {})
过滤器传值说明：
//传入单个参数
<h3>{{8 | addZero}}</h3>
//过滤器写法：
Vue.filter('addZero',data => { //8传给data
// 返回过滤器的值
});
//传入多个参数
<h3>{{12.345678 | number(3)}}</h3>
//过滤器写法：
Vue.filter('number',(data,n) => { //{{12.345678 | number(3)}} => 12.345678(操作的值) 传给data，3(过滤器中的参数)传给n
// 返回过滤器的值
});
说明：
(data,n,...) => {}:第个参数表示你操作的值，后面的值依次表示你为这个过滤器传递后面的参数，这个参数可能会有n个，甚至更多。
3.3、自定义局部过滤器
局部过滤器，在vue的实例中filters的选择，定义过滤器，定义过滤器的语法跟全局过滤器是一样的。
<body>
<div id="box">
<!--调用局部过滤器-->
<h3>{{12.345678 | number(3)}}</h3>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
//定义Vue实例
new Vue({
el: "#box",
data:{
},
filters:{ //定义局部过滤器，这边可以定义多个，语法跟全局过滤器一样
number:(data,n) => {
return data.toFixed(n);
}
}
});
</script>
</body>
至此Vue.js的过滤器已经学完啦。
浙公网安备 33010602011771号