資訊專欄INFORMATION COLUMN
摘要：里，不再有自帶的過濾器，需要自己定義過濾器在中內置了幾種實用的過濾器函數如，但在中這些方法都被廢除了需要自己定義過濾器。所以我們需要進行改寫標題哈哈
vue2.0里，不再有自帶的過濾器，需要自己定義過濾器
在 Vue1.0 中內置了幾種實用的過濾器函數如 uppercase ，但在 Vue2.0 中這些方法都被廢除了需要自己定義過濾器。
定義的方法：注冊一個自定義過濾器，它接收兩個參數：過濾器 ID 和 過濾器函數，其中過濾器函數接收多個參數。舉個栗子：
//main.js
Vue.filter("reverseStr", function(value) {
return value.split("").reverse().join("")
});
//*.vue
{{ content | reverseStr }}
//render result
dcba
看到這里熟悉 Shell 管道命令的同學就會感覺很熟悉，沒錯 Vue 的過濾器操作符 | 和 Shell 命令一樣，能將上一個過濾器輸出內容作為下一個過濾器的輸入內容，也就是說 Vue 允許你這樣使用過濾器：
//main.js
Vue.filter("removeNum", function (value) {
return value.replace(/[^0-9]/g, "");
})
//*.vue
{{ content | reverseStr | removeNum }}
//render result
dcba
是不是很好很強大？！但在 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.
也就是說過濾器現在只能用在兩個地方：mustache 插值和 v-bind 表達式。在 v-model 、v-on 、v-for 等指令時 Vue 還是推薦我們將該邏輯通過 computed 來計算屬性。所以我們需要進行改寫：
{{ markedContent }}
gayHub: https://github.com/yanm1ng
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83263.html
摘要：實例中，可追蹤數據發生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環前，進行去重優化，然后重新渲染。最早通過實現了這一需求，通過事件可監聽的變化，實現不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態。(定...
摘要：實例中，可追蹤數據發生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環前，進行去重優化，然后重新渲染。最早通過實現了這一需求，通過事件可監聽的變化，實現不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態。(定...
摘要：實例中，可追蹤數據發生變化時，會開啟一個隊列，把變化記錄其中，在下一次事件循環前，進行去重優化，然后重新渲染。最早通過實現了這一需求，通過事件可監聽的變化，實現不同頁面的操作。過濾器的使用通過引入中 1、vue中的過渡、動畫效果 單組件（）v-enter,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active六種狀態。(定...
摘要：記錄一些小技巧和踩過的坑由于本篇文章內容太多，導致編輯器有點卡，所以新開辟了一篇實踐二，后續再這里更新。組件的生命周期函數是在標簽里的數據發生變化時候觸發數據可能更新了，但是沒有綁定到上面的話，不會調用鉤子函數。 記錄一些小技巧和踩過的坑 由于本篇文章內容太多，導致SF編輯器有點卡，所以新開辟了一篇 vue2實踐（二），后續再這里更新。 1. props 帶不帶冒號的區別 ...
閱讀 2789·2021-11-19 11:30
閱讀 3069·2021-11-15 11:39
閱讀 1800·2021-08-03 14:03
閱讀 1999·2019-08-30 14:18
閱讀 2055·2019-08-30 11:16
閱讀 2171·2019-08-29 17:23
閱讀 2614·2019-08-28 18:06
閱讀 2546·2019-08-26 12:22
