用範例理解Vue.js #7:Filters vs Computed | Vue filter vs method
FiltersVue.js允許自定義過濾器,過濾器分為本地和全域。使用方法分為兩種:模板運算後方加上管道符號|{{value|filterName}}
{{price|filterDollarSign}}
FiltersVue.js允許自定義過濾器,過濾器分為本地和全域。使用方法分為兩種:模板運算後方加上管道符號|{{value|filterName}}
{{price|filterDollarSign}}
Vue.js 允許自定義過濾器,過濾器分為本地和全域。使用方法分為兩種:
模板運算後方加上管道符號| {{ value | filterName }} <div v-bind:id="value | filterName"></div> Local filters你可以在 Vue Instance 中定義本地過濾器:
附上 fiddle (https://jsfiddle.net/hunterliu/1q4g5bmu/1/[1])
<div id="app"> <p>{{ price | filterDollarSign }}</p> </div> var vm = new Vue({ el: #app, data: { price: 199999 }, filters: { filterDollarSign(price) { return $ + price; } } }) Global filters改寫上面的範例為全局過濾器,寫法如下:
附上 fiddle (https://jsfiddle.net/hunterliu/zzm4b7cj/2/[2])
<div id="app"> <p>{{ price | filterDollarSign }}</p> </div> Vue.filter(filterDollarSign, function(price) { return $ + price; }); var vm = new Vue({ el: #app, data: { price: 199999 } })差異:
HTML 中的使用方法沒有改變,都是{{ price | filterDollarSign }},但差別在於 Local filters 範圍僅在該 Vue Instance 中...