Question

我有几个div，我需要根据数组中的值设置每个背景。我试图通过创建计算属性来设置每个背景叠加：

 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}`) }"

但是，这不起作用，我没有得到计算值，我怎么能这样做？

Answer 1

对于计算属性：

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)}"

Answer 2

如果您的数据已修复且背景不会发生变化，那么您只需将背景设置为：

: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]}"

Vue 2 - 动态获取计算的backgroundImage

2 个答案: