Vue 模板編程實踐之巧用過濾器

Vue 中的 Html 模板相比 JSX 缺乏了可編程的靈活性。可是這一缺點在很大程度上是能夠緩解的。html

巧用過濾器

咱們服務端保存和返回的都是圖片的 key ，而後須要客戶端來拼成最終的 url. 爲了將附件的圖片設置成背景圖片。須要像下面這樣構造一個 style 對象。不難看出在字符串中編程是比較難受的一件事。編程

<div class="attachment" :style="{'backgroundImage':'url(http://snsimg.test.com/'+attachment.key+')'}" ></div>
複製代碼

Vue 提供了過濾器能夠解決這個難受的問題。markdown

Vue.filter("key2bg", function(value: string) {
 const url = "http://snsimg.test.com/"+value;
 return { backgroundImage: `url(${url})` };
});

複製代碼

而後這樣使用便可：性能

<div class="attachment" :style="attachment.key|key2bg"></div>
複製代碼

因爲 Vue 會將 html 模板編譯成代碼，因此性能上是不成問題的。事實上上面的模板將編譯成以下代碼。url

return _c("div", {
   staticClass: "attachment",
   style: _vm._f("key2bg")(attachment.key),
 })
複製代碼