在Vue项目中的标签的内联式css样式表使用变量字符串拼接

郭宝

于 2018-10-09 15:23:03 发布

阅读量1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/qq_35366269/article/details/82982898

Web前端专栏收录该内容

284 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了如何在Vue项目中利用变量字符串拼接实现内联CSS样式表，特别是针对动态更改背景图片资源的问题。通过示例代码展示了具体的解决方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景还原：

需要动态更改DIV标签的背景图片资源，原始代码如下图：

      <div class="mui-card" v-for="(item,index) in menuBarItem" :key="index">

        <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(http://pic21.photophoto.cn/20111106/0020032891433708_b.jpg)"></div>

      </div>

解决代码如下：

     <div class="mui-card" v-for="(item,index) in menuBarItem" :key="index">

        <div class="mui-card-header mui-card-media" :style="'height:40vw;background-image:url('+item.img_url+')'"></div>

      </div>