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

巧用过滤器

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

    
复制代码

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

1. 定义一个过滤器：

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

然后这样使用即可：

    
复制代码

由于 Vue 会将 html 模板编译成代码，所以性能上是不成问题的。 事实上上面的模板将编译成如下代码。

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