过滤器格式 Vue.filter("过滤器名字",function(data){}) 这种过滤器是全局过滤器,所有的vue实例都能够使用
如果你想创建局部的过滤器,应该在vue实例内部创建filters.格式如下
过滤器调用采用就近原则,如果局部过滤器和全局过滤器重名,会优先采用局部的过滤器
var vm1 = new Vue({
el:"#test",
data:{},
methods:{},
filters:{
my_filter:function(data){} //新定义了一个名字为my_filter的过滤器
}
})
下面是全局过滤器和局部过滤器的代码示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../util/vue-2.4.0.js"></script>
</head>
<body>
<div id="test">
<p>{{ msg | my_filter("成熟")}}</p>
<p>{{ msg | my_filter2("可爱") }}</p>
</div>
<script>
//vue 过滤器 格式
// 过滤器的名字自己定义,英文, 后面接受的第一个参数是管道符定义传递过来的数据
// vue.filter("过滤器的名字",function(data){})
// 使用过滤器注意事项,过滤器不改变原有数据,只是加工了原有数据,生成了一个新的数据返回
Vue.filter("my_filter", function (data,arg1) { // 全局过滤器
// replace 方法第一个参数可以传字符串,也可以传正则
// return data.replace("单纯","成熟");
return data.replace(/单纯/g,arg1);
// 显示结果为我曾经也是一个成熟的少年
});
var vm1 = new Vue({
el:"#test",
data:{
msg:"我曾经也是一个单纯的少年"
},
filters:{ // 局部过滤器(私有过滤器)
my_filter2: function (data,arg1) {
return data.replace(/单纯/g,arg1);
// 显示结果为 我曾经也是一个可爱的少年
}
}
})
</script>
</body>
</html>
