Vue.js - 插值错误 - 如何将样式重写为v-bind:样式?

时间:2016-05-02 09:59:54

标签: javascript css interpolation vue.js

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

  

“style”属性中的插值将导致在Internet Explorer中丢弃该属性。改为使用v-bind:style。

这是由这段代码引起的:

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

现在我不知道如何将其更改为正确的语法,如果背景图像不包含url()部分并不难,但现在我对如何正确地重构这一点感到困惑。有人可以帮帮我吗?

干杯。

1 个答案:

答案 0 :(得分: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})`">