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