Vue 模板编程实践之巧用过滤器

Vue 中的 Html 模板相比 JSX 缺少了可编程的灵活性。但是这一缺点在很大程度上是可以缓解的。

巧用过滤器

我们服务端保存和返回的都是图片的 key ，然后需要客户端来拼成最终的 url. 为了将附件的图片设置成背景图片。需要像下面这样构造一个 style 对象。不难看出在字符串中编程是比较难受的一件事。

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

Vue 提供了过滤器可以解决这个难受的问题。

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 模板编译成代码，所以性能上是不成问题的。事实上上面的模板将编译成如下代码。

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