vue:使用v-for写入:style中图片做背景

最新推荐文章于 2025-10-05 00:20:52 发布

原创最新推荐文章于 2025-10-05 00:20:52 发布 · 7.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#:style

vue 同时被 2 个专栏收录

32 篇文章

订阅专栏

日常学习和储备[暂存区]

24 篇文章

订阅专栏

本文深入探讨了Vue中荣誉展示组件的实现细节，包括如何使用v-for循环渲染荣誉列表，如何根据状态代码改变荣誉图标样式，以及如何通过按钮触发荣誉领取操作。文章还提到了在:style中设置背景图片时的注意事项。

<div class="honor_row" v-for="(item,i) in points.awardList" :key='i'>
                <span class="radius200 " :style="{'background': 'url('+imgDomain+item.filePhysPath+') no-repeat center center'}" :class="item.sttusCode == '14002'?'honor-light':'honor-nolight'">
                </span>
                <el-button v-if="item.sttusCode == '14001'" type="primary" plain @click="showdialogHonor(item.awardName,item.awardId)">领取荣誉</el-button>
              </div>

:style里面不能有;号
键值要有’'括起来