javascript - Vue.js - 插值错误 - 如何将样式返工为 v-bind :style?

Question

我目前收到此控制台错误消息:

interpolation in "style" attribute will cause the attribute to be discarded in Internet Explorer. Use v-bind:style instead.

这是这段代码造成的:

    <div class="placeholder-img" 
    style="background-image: url({{ travel._source.field_image[0].url }})">

现在我不知道如何将其更改为正确的语法，如果背景图像不包含 url() 部分也不难，但现在我对如何正确重构它有点困惑。谁能帮帮我？

干杯。

Answer 1

<div class="placeholder-img" 
    v-bind:style="{ 'background-image': 'url(' + travel._source.field_image[0].url ')' }">

当对 v-bind 使用简写时:

<div class="placeholder-img" 
    :style="{ 'background-image': 'url(' + travel._source.field_image[0].url ')' }">

使用 ES6 语法时:

<div class="placeholder-img" 
    :style="{ 'background-image': `url(${travel._source.field_image[0].url})` }">