Vue.js | v-for filter
23May2017Vue.js提供Filter(過濾器)處理格式化文字等狀況,若非資料處理,只是呈現上的簡易調整,就很適合使用Filter。如何使用Filter過濾器?Mustache模版插植如下例,將價格price加上千分位符號與$字號。可使用「|」(pipe)聯集多個Filter,要注意順序,愈靠左愈先執行。Demo程式碼${price|commaFormat|priceFormat}
Vue.js 提供 Filter(過濾器)處理格式化文字等狀況,若非資料處理,只是呈現上的簡易調整,就很適合使用 Filter。
如何使用 Filter 過濾器? Mustache 模版插植如下例,將價格 price 加上千分位符號與 $ 字號。可使用「|」(pipe)聯集多個 Filter,要注意順序,愈靠左愈先執行。
Demo 程式碼 <div id="app"> <div>${ price | commaFormat | priceFormat }</div> </div> var vm = new Vue({ el: #app, delimiters: [${, }], data: { price: 9999999, }, Filters: { priceFormat: function(value) { // 加上 $ 字號 return $ + value; }, commaFormat: function(value) { // 加上千分位符號 return value .toString() .replace(/(-?d+?)((?:d{3})+)(?=.d+$|$)/, function(all, pre, groupOf3Digital) { return pre + groupOf3Digital.replace(/d{3}/g, ,$&); }); }, }, }); // 由於部落格會把使用雙花括號的內容吃掉,所以設定 delimiters 以顯示完整程式碼。備註:這裡的 Filter 是局部註冊。
注意 Filter 的設定順序。如下所示,若先執行 priceFormat 再執行 commaFormat,就會轉失敗。
Demo 程式碼 <div id="app"> <div>${...