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),
 })
复制代码