其实可以理解成就是一个函数。
过滤器分为两种。
1.全局过滤器
./libs/filter.js
import Vue from 'vue'
Vue.filter('capitalize',(value)=>{
if (!value) return ''
return value + "1"
})
引入：
main.js
import "./libs/filter"
调用：
< !-- 在双花括号中 -->
{{message | capitalize}}
< !-- 在v-bind中 -->
<div v-bind:id="rawId | capitalize"></div>
export default(){
methods:{
getDetail(){
//在函数里调用
let capitalize = this.$options.filters.capitalize(data)
}
}
}
2.组件过滤器
export default(){
data(){
return{
}
{
filters:{
filterA：function(value){
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
},
filterB: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
},
},
watch: {
},
methods: {
},
mounted() {
}
};
用法同全局
多参数
{{ message1, message1 | filterA }}
其他用法：
串联
{{ message | filterA | filterB }}
串联用法会将前一个的返回当作下一个过滤器的参数 例如
message 的内容会被当做filterA的入参，
而filterA的返回则会当作filterB的入参，
最终返回filterB的结果
直接传参
{{ message | filterA('arg1', arg2) }}
此时message 依然会被当做第一个参数。而arg1和arg2 则会被当做第二个和第三个参数传入
