V-绑定在不工作的V-的

我有以下代码V-绑定在不工作的V-的

<div v-for="item in items"> 
    <div class="background-wrapper" v-bind:style="{ backgroundImage: 'url(' + item.image + ')' }"></div> 
    <h2>{{ item.title }}</h2> 
</div>

的background-image样式设置为undefined，我不知道为什么。 item.title的作品。当我将item.title更改为item.image时，它会打印出正确的网址。

我在做什么错了？

来源

2017-10-18 Ituhimux

你能用你的问题创建一个简单的片段？ – Jackowski

简单的代码片段适合我。 –

你的意思是这样的：'background-image：url（“undefined”）;'通过未定义的背景图像风格？如果是这样，那么图像属性是未定义的。错别字？ –

没有什么错与您的代码，请确保您的容器实际上有一个高度和宽度，如：

.background-wrapper { 
    width: 350px; 
    height: 150px; 
}

而且该图像确实存在，这里的的jsfiddle：https://jsfiddle.net/xvph0ehs/

来源

2017-10-18 14:11:12

这段代码适合我。但我没有使用我的数据。但现在它可以工作，因为我已将它更改为 v-bind：style =“{'background-image'：'url（\''+ item.image +'\'）'} – Ituhimux

您也可以使用快捷方式'v-bind：style'到'：style =“{}”'，这适用于大部分html属性，例如'：class =“{}”'而不是'v-bind：class' – ricardoorellana

V-绑定在不工作的V-的

回答

相关问题