css行内样式动态添加背景图片及样式

最新推荐文章于 2024-04-07 14:48:40 发布

原创最新推荐文章于 2024-04-07 14:48:40 发布 · 3.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

css 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在Vue中如何使用v-for指令动态设置元素背景图片，关键在于将图片URL正确拼接在样式中，确保背景重复、尺寸适应。适用于前端开发中的界面动态渲染场景。

有时候需要循环动态添加背景图片，可以采用以下方法，重点是url后面别忘了加'+'

 <div
      class="right_item"
      :style="{
        'background-image': item.isChecked
          ? 'url(' + item.bgActive + ')'
          : 'url(' + item.bg + ')',
        'background-repeat': 'no-repeat',
        'background-size': 'cover',
      }"
      v-for="item in tabLists"
      :key="item.id"
    ></div>