<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>
</head>
<body>
<div id="box">
<ul> <!-- 以"|"号分割 浏览器结果为：全局过滤姓名:吴师傅 年龄:18 -->
<li v-for="items in arr">{{items.name | fn1("姓名:") | quanju("全局过滤")}} {{items.age | fn2("年龄:")}}</li>
</ul>
</div>
<script type="text/javascript">
//全局过滤器,一样可以有两个参数，第一个参数永远都是被过滤的数据，后续的参数都是传值参数
Vue.filter("quanju",function(data,canshu){
return canshu+data;
})
var vm=new Vue({
el:"#box",
data:{arr:[{"name":"吴师傅","age":18},{"name":"李师傅","age":20}]},
//局部过滤器 一般推荐用局部过滤器
filters:{
//第一个局部过滤器,第一个参数规定是被过滤的数据，第二个或后续的参数是这个方法的传值参数
fn1:function(data,canshu){
let mess=canshu+data;
return mess;
},
//第二个局部过滤器,第一个参数规定是被过滤的数据，第二个或后续的参数是这个方法的传值参数
fn2:function(data,canshu){
return canshu+data;
}
}
});
</script>
</body>
</html>Vue过滤器Demo
猜你喜欢
转载自blog.csdn.net/chijiajing/article/details/82804713
今日推荐
周排行