Vue过滤器(filter)
主要用于文本的格式化,或者数组数据的过滤排序等。
用在两个地方:1.{{}}插值,2.v-bind
{{message | capitalize}}
<div v-bind:id="rawId" | formatId"></div>
全局过滤器
定义全局过滤器 Vue.filter(“过滤器ID(即名称)”,function(value){
过滤器所实现的功能
})
过滤器本质是一个函数:过滤器名=函数名“myfilter”
在插值表达式中,变量即传递给过滤器的参数
<div id="app">
<input type="text" v-model="message">
<br><br>
{{message | myfilter}}
</div>
<script>
//过滤器本质是一个函数:过滤器名=函数名“myfilter”
//在插值表达式中,变量即传递给过滤器的参数
Vue.filter("myfilter",function(value){
if(!value){
return ""
}
value = value.toString();//将value的值转换为字符串
return value.toUpperCase();
})
new Vue({
el:"#app",
data:{
message:"Hello World"
}
})
</script>
局部过滤器
<div id="app">
<input type="text" v-model="message">
<br><br>
{{message | myfilter}}
</div>
<script>
new Vue({
el:"#app",
data:{
message:"Hello"
},
filters:{
//局部过滤器
myfilter:function(value){
if(!value) return ""
value = value.toString();
return value.toLowerCase()
}
}
})
</script>
过滤器串联
{{message | filterA | filterB}}
在这个例子中,filterA
被定义为接收单个参数的过滤器函数,表达式 message
的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB
,将 filterA
的结果传递到 filterB
中。
{{ message | filterA(‘arg1’, arg2) }}
这里,filterA
被定义为接收三个参数的过滤器函数。其中 message
的值作为第一个参数,普通字符串 'arg1'
作为第二个参数,表达式 arg2
的值作为第三个参数。