1.使用
概念:过滤器可以在目标文本做自定义操作,例如:表单验证,首字母大写,将日期格式化等
过滤器只能在 {{ }}
和 v-bind
中使用
1.全局过滤器
定义全局过滤器直接在
Vue
实例对象外定义即可
在使用 {{ }}
输出数据时,可以直接在括号中加上 |
+过滤器名称
,如下
//html
<p>{{ msg | msgFilter }}</p> //使用过滤器。
//此处 msgFilter 可以传参数。对应过滤器的第二个以及之后的参数
//js
Vue.filter('msgFilter', function(msg)){ //定义全局过滤器
//.........
}
var vm = new Vue({
//....
data:{
msg:'明天的明天'
}
//....
} )
这时 ,我们就可在 msgFilter
的回调函数中设置过滤操作了
此时我们使用过滤器将 msg
中的明天替换成后天
Vue.filter('msgFilter', function(msg)){ //定义过滤器
return msg.replaceAll('明天','后天') //return 实际上直接返回给 html 中了
}
这时网页上呈现的就是 '后天的后天'
了
注意:上述过滤器并没有改变 data
中的 msg
,只是更改了msg
输出到 html
中的值
调用多个过滤器
调用格式如下
<p>{{ msg | msgFilter | msgFilter2}}</p> //使用过滤器
//js
Vue.filter('msgFilter', function(msg)){ //定义过滤器
//.........
}
Vue.filter('msgFilter2', function(msg)){ //定义过滤器
//.........
}
上述的调用方法,会使两个过滤器一起对msg
生效
2.私有过滤器(局部)
私有过滤器在
Vue
实例对象内定义,与全局定义有一点不同,但原理都是一样的
私有过滤器直接在Vue实例中的,filters
属性中定义,如下
//js
var vm = new Vue({
//.....
filters:{
ft1: function(dataStr,arg){ //...... }
ft2: function(dataStr,arg){ //...... }
//可以定义多个过滤器
}
//.....
})
过滤器优先级:私有 > 全局