正文
Vue-Methods中使用Filter
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.Vue中Filter声明方式
Vue中存在两种声明Filter过滤器的方式:
1.全局过滤器
Vue.filter('testFilter1',function(val){
console.log("全局过滤器",val);
})
这种方式将过滤器声明到了Vue类型上,所有Vue对象即可访问这个过滤器
2.本地过滤器
new Vue({
filters:{
testFilter2(val){
console.log("本地过滤器",val);
}
}
})
这种方式将过滤器声明到这个Vue对象中,所以只能这个Vue对象进行访问
2.Vue中在Methods中访问Filter
Vue中在Methods中访问Filter有两种方式,分别对应两种Filter的声明方式
1.访问全局过滤器
<div id="body">
<button @click='getGlobal()'>调用全局过滤器</button>
</div>
<script >
Vue.filter('testFilter1',function(val){
console.log("全局过滤器",val);
})
new Vue({
el:'#body', methods:{
getGlobal(){
//使用Vue.Filter()方式获取全局过滤器
var te = Vue.filter('testFilter1');
//调用全局过滤器
te('filter');
}
}
})
</script>
2.访问本地过滤器
<div id="body">
<button @click='getLocal()'>调用本地过滤器</button>
</div>
<script >
new Vue({
el:'#body',
filters:{
testFilter2(val){
console.log('本地过滤器',val);
}
},
methods:{
getLocal(){
//使用this.$options.filters[]方式获取本地过滤器
var te = this.$options.filters['testFilter2'];
//调用本地过滤器
te('filter');
}
}
})
</script>
