Vue中的filter和methods

Vue的filter与method

有时候,我们会想在Vue中的filter通过this去访问这个Vue实例上的属性或者方法,但是这样是做不到的,因为此时这个this指的全局对象window。
但是反过来,我们可以在methods去访问到过滤器的方法。由于过滤器分为全局的过滤器和局部的过滤器,所以分为俩种情况。

  1. 全局过滤器
    比如我申明了如下一个过滤器
Vue.filter('filterStatus', function(status) {
    var store = {
        '-1': { label: '待发布'},
        '0': { label: '已发布'},
        '1': { label: '已暂停'},
        '2': { label: '已关闭'}
    };
    return store[status].label;
});

在实例化Vue之前,我定义了一个全局的过滤器,现在我想要methods里面去访问他,可以这么做

Vue.filter('filterStatus')('-1')

使用Vue.filter(‘filterStatus’)可以获取这个方法,后面括号里的其实就是传递参数了。

  1. 局部过滤器
    访问局部过滤器,可以在代码中这么写:
this.$options.filters[filterName](args)

由于在方法中,this是可以访问到Vue这个实例的,所以可以在$option上拿到过滤器

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章