Question

我有这个结构：

<div v-for="item in principal" class="cardgrande cardeffects imagehover">
  <div v-bind:style='{ background: "linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 40%,rgba(0,0,0,.2) 80%,rgba(0,0,0,.4)), url(" + item.midia + ")", }' class="flexcolumn card">
    <div class="texto">{{item.titulo}}</div>
  </div>
</div>

此item.midia不会进入我的动态样式。我需要得到这个，因为它是我的图像的网址（来自v-for）。

Answer 1

你不需要花括号。只需添加表单的动态属性：

<tag :attribute="'selector:' + yourVariable" />

还可以使用background-image代替background来设置多个背景图片。在你的情况下：

<div v-for="item in principal" class="cardgrande cardeffects imagehover">
  <div :style="'background-image: linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 40%,rgba(0,0,0,.2) 80%,rgba(0,0,0,.4)), url(' + item.midia + ')" class="flexcolumn card">
  <div class="texto">{{item.titulo}}</div>
</div>

请参阅the docs以供参考。

Answer 2

尝试使用返回样式的方法

  <div v-for="item in principal" class="cardgrande cardeffects imagehover">
    <div :style="itemStyle(item)" class="flexcolumn card">
      <div class="texto">{{item.titulo}}</div>
    </div>
  </div>

添加以下方法

  itemStyle(item) {
    return { background: `linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.2) 40%,rgba(0,0,0,.2) 80%,rgba(0,0,0,.4)), url(${item.midia})` }
  }

在vuejs中将v-for中的属性添加到dynamic：style中

2 个答案: