Vue 2 - 獲取計算backgroundImage動態

我有幾個divs，我需要從我有一個數組中設置每個值的背景。我試圖通過創建計算的屬性設置背景覆蓋到每個人：Vue 2 - 獲取計算backgroundImage動態

computed: { 
     backgroundImage(url) { 
     let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))'; 
     return 'background-image:'+ overlay +' , url(' + url + ');'; 
     } 
    }

然後，我就在想傳遞的URL像這樣計算的屬性：

:style="{ backgroundImage: url(`${articles[0].image.src}`) }"

但是，這不起作用，我沒有收回計算值，我該怎麼做？

來源

2017-08-30 Leff

這可能不是解決你的問題，但你不應該因爲你返回'背景image'已經在你的樣式綁定中定義了該部分。也許你可以展示使用樣式綁定的實際內容。 –

我只是得到'''style =「background：url（」http://my.app/content/uploads/2017/08/5948f40c8b13a84b075de6e9.png「）;''''，沒有覆蓋。 – Leff

爲什麼按照這種方式對計算屬性中的'overlay' CSS進行硬編碼？爲什麼不使用'background-image'和'background-color'而不是複合'background'？這樣你就可以用CSS輕鬆解決它。 –

-1

如果您的數據是固定的背景不會改變，那麼你可以簡單地設置喜歡的背景：

:style="{ background: `url(${articles[0].image.src})`}"

如果articles必須首先計算，那麼你可以把那個，或者一些在你的計算對象的其他值

computed: { 
    backgroundImages() { 
    const overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))'; 
    return articles.map(article => 'background-image:'+ overlay +' , url(' + articles[0].image.src + ')'); 
    }

然後：

:style="{ background: backgroundImages[0]}"

來源

2017-08-30 12:19:56 user2520818

但是，我不會得到我想爲每個文章 – Leff

確定的覆蓋。我懂了。你也可以做類似的事情： backgroundImages（）{overlay ='linear-gradient（270deg，rgba（0,0,0，.5），rgba（0,0,0，.5））'; （'+ articles [0] .image.src +'）;'） } 然後：：style =「{背景：backgroundImages [0]}「也許這有助於。 – user2520818

但是，我希望能夠傳遞來自文章數組的多個背景圖像，這樣我將只有數組 – Leff

對於計算性能：

computed: { 
    backgroundImage:() => (url) => { 
     let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))'; 
     return 'url("' + url + '"), ' + overlay; 
    } 
}

和方法：

methods: { 
    backgroundImage(url) { 
     let overlay = 'linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .5))'; 
     return 'url("' + url + '"), ' + overlay; 
    } 
}

用法：

:style="{ 'background-image': backgroundImage(articles[0].image.src)}"

來源

2017-08-30 12:41:38 talkhabi

沒有任何選項可行，當我測試它們時 – Leff

@Leff我已經更新了我的答案。你正在使用'rgba（0，0，0，.5）'這兩種漸變顏色，這將返回一個簡單的平面顏色而不是漸變。 – talkhabi

Vue 2 - 獲取計算backgroundImage動態

回答

相關問題