iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 8
1
Modern Web

Vue.js 30天系列 第 8

Vue.js 08 - 過濾器(Filter)

  • 分享至 

  • xImage
  •  

這篇本來要加入 樣板(Template) 常用功能的說明文,想到要說明 1.x 到
2.x 的寫法轉變,獨立出來會比較好。

過濾器(Filter) 像濾網,用來過篩資料,濾出的東西隨濾網形狀而定,小湯圓濾網濾不出福州圓。

例如字串處理

{{ message | capitalize }}

例如資料處理

<ul>
	<li v-for="word in words | filterBy userInput></li>
</ul>
<input type="text" v-model="userInput">

做的事很多,也可以串連起來

{{ message | filterA | filterB }}

但到了 2.0,主要用在格式轉換,意思只剩第一項。

其中一個主要原因是 過濾器(Filter) 能做的,計算屬性(Computed) 大部分都能做,並且會做 cache,以避免未異動的部分重覆運算,升級指南甚至附上 1.x 內建過濾器的對應寫法(搭配Lodash)。附上這篇討論供您參考。


在醫院寫這篇有點草,明天會好好更新內容,補上2.0拿掉原因的詳細說明


上一篇
Vue.js 07 - 樣板(template) 常用功能 - 列表
下一篇
Vue.js 09 - Watch
系列文
Vue.js 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言