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-的

回答

相關問題