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