Vue2.0中Filter的使用問題

why_rookie 發(fā)布于2019-08-20 16:56 / 1254人閱讀

摘要：里，不再有自帶的過濾器，需要自己定義過濾器在中內(nèi)置了幾種實用的過濾器函數(shù)如，但在中這些方法都被廢除了需要自己定義過濾器。所以我們需要進(jìn)行改寫標(biāo)題哈哈

vue2.0里，不再有自帶的過濾器，需要自己定義過濾器

在 Vue1.0 中內(nèi)置了幾種實用的過濾器函數(shù)如 uppercase ，但在 Vue2.0 中這些方法都被廢除了需要自己定義過濾器。

定義的方法：注冊一個自定義過濾器，它接收兩個參數(shù)：過濾器 ID 和過濾器函數(shù)，其中過濾器函數(shù)接收多個參數(shù)。

舉個栗子：

//main.js
Vue.filter("reverseStr", function(value) {
    return value.split("").reverse().join("")
});

//*.vue




//render result
dcba

看到這里熟悉 Shell 管道命令的同學(xué)就會感覺很熟悉，沒錯 Vue 的過濾器操作符 | 和 Shell 命令一樣，能將上一個過濾器輸出內(nèi)容作為下一個過濾器的輸入內(nèi)容，也就是說 Vue 允許你這樣使用過濾器：

//main.js
Vue.filter("removeNum", function (value) {
  return value.replace(/[^0-9]/g, "");
})

//*.vue




//render result
dcba

是不是很好很強(qiáng)大？！但在 Vue2.0 中使用過濾器我遇到一個這樣的場景，我需要在 v-html 指令中使用過濾器，如下：

//*.vue

這種寫法在 Vue1.0 中并沒有問題，但是在 Vue2.0 中拋出錯誤：

property or method "marked" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

最終查閱官方文檔給出的解釋是：

Filters can now only be used inside text interpolations ({{}} tags). In the past we"ve found using filters with directives such as v-model, v-on etc. led to more complexity than convenience, and for list filtering on v-for it is more appropriate to move that logic into JavaScript as computed properties.

也就是說過濾器現(xiàn)在只能用在兩個地方：mustache 插值和 v-bind 表達(dá)式。在 v-model 、v-on 、v-for 等指令時 Vue 還是推薦我們將該邏輯通過 computed 來計算屬性。所以我們需要進(jìn)行改寫：

gayHub: https://github.com/yanm1ng