vue-for 中设置元素 style 背景图片
   1 分钟阅读

需求:需要动态设置某个 DOM 的背景图片;

使用的 VUE2,在 v-for 的时候,一般都是

<h3>{{item.title}}</h3>

或者直接 : src=

:src = item.target.cover_url

这样的写法;

但是遇到一个特殊场景,渲染出 background-image 这样的,就不能再用上面的方法了;

直接上代码

<router-link to="/?" class="feed-item" tag="a" v-for="(item,index) in recommend_feeds">
  <!-- 布局1 -->
  <div v-if="item.layout !== 5">
    <div class="feed-content">
      <div class="cover"
           style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);"
           :style="{backgroundImage: 'url(' + item.target.cover_url + ')'}"
      >
        <div style="padding-top: 100%"></div>
      </div>
      <h3>{{item.title}}</h3>
      <p>{{item.target.desc}}</p>
    </div>
    <div class="author">
      <span class="name">by {{item.target.author.name}}</span>
    </div>
    <span class="feed-label">{{item.source_cn}}</span>
  </div>

  <!-- 布局5 -->
  <div v-else="item.layout === 5">
    <div class="feed-content">
      <div class="photos">
        <div class="main"
             style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);"
             :style="{backgroundImage: 'url(' + item.target.cover_url + ')'}"
        >
          <div></div>
        </div>
        <div class="aside">
          <div class="aside-pic">
            <div
              style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);"
              :style="{backgroundImage: 'url(' + item.target.more_pic_urls[0] + ')'}"
            >
              <div style="padding-top: 100%;"></div>
            </div>
          </div>
          <div class="aside-pic">
            <div
              style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);"
              :style="{backgroundImage: 'url(' + item.target.more_pic_urls[1] + ')'}"
            >
              <div style="padding-top: 100%;"></div>
            </div>
            <div class="more-pic">
              <span class="count">
                {{item.target.photos_count-3}}+
              </span>
            </div>
          </div>
        </div>
      </div>
      <h3>{{item.title}}</h3>
    </div>
    <div class="author">
      <span class="name">by {{item.target.author.name}}</span>
    </div>
    <span class="feed-label">{{item.source_cn}}</span>
  </div>
</router-link>

核心代码是下面的这一段

<div class="cover"
     style="position: relative; background: center center / cover no-repeat rgb(250, 250, 250);"
     :style="{backgroundImage: 'url(' + item.target.cover_url + ')'}"
>
  <div style="padding-top: 100%"></div>
</div>

这里是先设置了普通的 style;

因为图片的地址是需要解析的;所以不能写在默认的 style 里;我们需要在 :style 里面(这里面的会动态加载并解析进去)

需要用到的是 backgroundImage 这个驼峰写法,不要写错了(默认的属性 background-image 是不行的)

本文目录