过滤器概念
Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式
过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示
过滤器中的 function,第一个参数是管道符前面 传递过来的数据
过滤器调用时候的格式:
{{value| 过滤器的名称}}
全局过滤器
Vue.filter(‘过滤器的名称’,function(){})
案例
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="app">
<!-- 可以调用多个过滤器 -->
<p>{{ msg | msgFormat('母后','123') | test}}</p>
</div>
</head>
<body>
</body>
<script type="text/javascript">
// 定义一个Vue全局的过滤器,名字叫做 msgFormat
Vue.filter('msgFormat',function(msg,arg,arg2){
// 字符串的 replace 方法,第一个参数,除了可写一个 字符串 之外,还可以定义一个正则
return msg.replace(/魔镜/g,arg + arg2)
})
Vue.filter('test',function(msg){
return msg + '======='
})
var vm = new Vue({
el:'#app',
data:{
msg:'魔镜魔镜,谁是这世界上最美丽的女人,魔镜说当然是小鱼儿'
},
})
</script>
</html>
以上内容出自:作者:小鱼儿_逆流而上
链接:https://www.jianshu.com/p/a585f4c55f72
局部过滤器
第一个参数依然是使用filter的message值。
<li v-for='(item,index) in arr'>
{{item.status|filterItem}}
</li>
new Vue({
data:{
arr:[
{text:'banner',status:1},
{text:'orange',status:2}
]
},
filters:{
filterItem:function(status){
var statusArr=['success','failed'];
return statusArr[status];
}
}
})
过滤器总结
作用:用作一些常见的文本格式化
用法:过滤器应该被添加在 mustache 插值的尾部
Vue 2.x 中,过滤器只能在 mustache 绑定中使用。为了在指令绑定中实现同样的行为,你应该使用计算属性。
外部写法定义在实例化vue之前。
过滤器有返回值。
使用场景:如后台返回1,2,3,4等情况时,1表示支付成功,2表示支付失败