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上拿到過濾器

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