过滤器
概念:vue.js允许你自定义过滤器,可被用作一些文本的转换格式,过滤器可以用在两个地方,mustache插值和v-bind表达式,过滤器应该别加载在js表达式的尾部,由“管道”符指示
过滤器格式
{{name|nameope}}
过滤器中的function,第一个参数已经被规定死了,data
例子:
Vue.filter('过滤器名称',function(data){
})
<div id="app">
{{msg|msgFormat}}
</div>
<script>
Vue.filter('msgFormat',function (msg) {
//字符串的replace,第一个参数,除了可以写字符串,还可以写正则表达式
return msg.replace(/单纯/g,'邪恶')
})
var vm=new Vue({
el:"#app",
data:{
msg:"我曾经也是一个单纯的少年,单纯的单纯的想,世界上谁最单纯"
// 欲输出将所有的单纯替换成邪恶
},
})
</script>
总结:
也就是说,调用该过滤器时{{需要处理的字符串|过滤器名字}}
创建过滤器时
Vue.filter('msgFormat',function(msg){
//第一个参数是过滤器名称,第二个参数是过滤器执行的方法,且传入一个需要处理的字符串
XXX
})
过滤器的参数
在调用过滤器时可以传入一个参数{{msg|msgFormate('aaa')}}
创建时就在function的第二个参数处传入即可,也可以传入多个参数
所谓的全局过滤器,是所有的Vue对象,都可以共享
定义局部过滤器
定义私有过滤器
就和methods,data,el一样,在filters中
var vm=new Vue({
el:"#app",
data:{
msg:"我曾经也是一个单纯的少年,单纯的单纯的想,世界上谁最单纯"
// 欲输出将所有的单纯替换成邪恶
},
filters:{
msgFormat:function(msg){
return msg.replace(/单纯/g,'邪恶')
}
}
})